Estou a usar o Angular 5 e I'criei um serviço usando o angular-cli
O que eu quero fazer é criar um serviço que leia um ficheiro json local para o Angular 5.
Isto é o que eu tenho ... I'estou um pouco presa...
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));
}
}
Como é que posso terminar isto?
Primeiro tem de injectar HttpClient
e não HttpClientModule
,
a segunda coisa que tem de remover .map((res:any) => res.json())
ganhou'já não precisa dele porque o novo HttpClient
dar-lhe-á o corpo da resposta por defeito , finalmente certifique-se de que importa o HttpClientModule
no seu 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");
}
}
para adicionar isto ao seu Componente:
@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);
});
}
}
Tem uma solução alternativa, importando directamente o seu json.
Para compilar, declare este módulo no seu ficheiro typings.d.ts
declare module "*.json" {
const value: any;
export default value;
}
No seu código
import { data_json } from '../../path_of_your.json';
console.log(data_json)
Encontrei esta pergunta quando procurei uma forma de ler realmente um ficheiro local em vez de ler um ficheiro do servidor web, que I'prefiro chamar um "ficheiro remoto".
Basta chamar require
:
const content = require('../../path_of_your.json');
O código fonte Angular-CLI inspirou-me: Descobri que eles incluem modelos de componentes substituindo a propriedade "templateUrl" por "template" e o valor por uma chamada de "exigência" para o recurso HTML real.
Se utilizar o compilador AOT tem de adicionar a definição do tipo de nó, ajustando tsconfig.app.json
:
"compilerOptions": {
"types": ["node"],
...
},
...