Ich bin mit Angular 5 und I've erstellt einen Dienst mit der angular-cli
Was ich tun möchte, ist, einen Dienst zu erstellen, der eine lokale json-Datei für Angular 5 liest.
Dies ist, was ich habe ... Ich'm ein bisschen stecken...
import { Injectable } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
@Injectable()
export class AppSettingsService {
constructor(private http: HttpClientModule) {
var obj;
this.getJSON().subscribe(data => obj=data, error => console.log(error));
}
public getJSON(): Observable<any> {
return this.http.get("./assets/mydata.json")
.map((res:any) => res.json())
.catch((error:any) => console.log(error));
}
}
Wie kann ich das fertig bekommen?
Zuerst müssen Sie HttpClient
und nicht HttpClientModule
injizieren,
Zweitens müssen Sie .map((res:any) => res.json())
entfernen, da Sie es nicht mehr benötigen, da der neue HttpClient
Ihnen standardmäßig den Body der Antwort liefert. Stellen Sie schließlich sicher, dass Sie HttpClientModule
in Ihr AppModule
importieren
:
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
@Injectable()
export class AppSettingsService {
constructor(private http: HttpClient) {
this.getJSON().subscribe(data => {
console.log(data);
});
}
public getJSON(): Observable<any> {
return this.http.get("./assets/mydata.json");
}
}
um dies zu Ihrer Komponente hinzuzufügen:
@Component({
selector: 'mycmp',
templateUrl: 'my.component.html',
styleUrls: ['my.component.css']
})
export class MyComponent implements OnInit {
constructor(
private appSettingsService : AppSettingsService
) { }
ngOnInit(){
this.appSettingsService.getJSON().subscribe(data => {
console.log(data);
});
}
}
Sie haben eine alternative Lösung, indem Sie Ihr json direkt importieren.
Um zu kompilieren, deklarieren Sie dieses Modul in Ihrer typings.d.ts-Datei
declare module "*.json" {
const value: any;
export default value;
}
In Ihrem Code
import { data_json } from '../../path_of_your.json';
console.log(data_json)
Ich fand diese Frage bei der Suche nach einem Weg, um wirklich eine lokale Datei zu lesen, anstatt eine Datei vom Webserver zu lesen, die ich eher als "Remote-Datei" bezeichnen würde.
Rufen Sie einfach require
auf:
const content = require('../../path_of_your.json');
Der Quellcode der Angular-CLI hat mich inspiriert: Ich habe herausgefunden, dass sie Komponenten-Templates einbinden, indem sie die Eigenschaft templateUrl
durch template
und den Wert durch einen require
-Aufruf der eigentlichen HTML-Ressource ersetzen.
Wenn Sie den AOT-Compiler verwenden, müssen Sie die Node-Type-Definitionen hinzufügen, indem Sie tsconfig.app.json
anpassen:
"compilerOptions": {
"types": ["node"],
...
},
...