Jeg bruker Angular 5 og har opprettet en tjeneste ved hjelp av angular-cli.
Det jeg ønsker å gjøre er å lage en tjeneste som leser en lokal json-fil for Angular 5.
Dette er hva jeg har ... Jeg sitter litt fast ...
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));
}
}
Hvordan kan jeg få dette ferdig?
Først må du injisere HttpClient
og ikke HttpClientModule
,
for det andre må du fjerne .map((res:any) => res.json())
du trenger den ikke lenger fordi den nye HttpClient
vil gi deg svarteksten som standard, til slutt må du sørge for at du importerer HttpClientModule
i din AppModule
.
:
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");
}
}
for å legge dette til i komponenten:
@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);
});
}
}
Du har en alternativ løsning ved å importere json direkte.
For å kompilere erklærer du denne modulen i filen typings.d.ts.
declare module "*.json" {
const value: any;
export default value;
}
I koden din
import { data_json } from '../../path_of_your.json';
console.log(data_json)
Jeg fant dette spørsmålet da jeg lette etter en måte å virkelig lese en lokal fil i stedet for å lese en fil fra webserveren, som jeg heller vil kalle en "ekstern fil".
Bare ring require
:
const content = require('../../path_of_your.json');
Angular-CLI-kildekoden inspirerte meg: Jeg fant ut at de inkluderer komponentmaler ved å erstatte egenskapen templateUrl
med template
og verdien med et require
-kall til den faktiske HTML-ressursen.
Hvis du bruker AOT-kompilatoren, må du legge til nodetypedefinisjonene ved å justere tsconfig.app.json
:
"compilerOptions": {
"types": ["node"],
...
},
...