Angular 5 kullanıyorum ve angular-cli kullanarak bir servis oluşturdum
Yapmak istediğim şey Angular 5 için yerel bir json dosyasını okuyan bir servis oluşturmak.
Bu benim sahip olduğum ... Biraz sıkıştım.
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));
}
}
Bunu nasıl bitirebilirim?
Öncelikle HttpClient
değil HttpClientModule
enjekte etmelisiniz,
ikinci olarak .map((res:any) => res.json())
öğesini kaldırmanız gerekir, artık buna ihtiyacınız olmayacak çünkü yeni HttpClient
varsayılan olarak size yanıtın gövdesini verecektir, son olarak AppModule
öğenizde HttpClientModule
öğesini içe aktardığınızdan emin olun
:
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");
}
}
bunu Bileşeninize eklemek için:
@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);
});
}
}
Doğrudan json'ınızı içe aktararak alternatif bir çözümünüz var.
Derlemek için bu modülü typings.d.ts dosyanızda bildirin
declare module "*.json" {
const value: any;
export default value;
}
Kodunuzda
import { data_json } from '../../path_of_your.json';
console.log(data_json)
Bu soruyu, web sunucusundan bir dosya okumak yerine yerel bir dosyayı gerçekten okumanın bir yolunu ararken buldum, ki buna "uzak dosya" demeyi tercih ederim.
Sadece require
deyin:
const content = require('../../path_of_your.json');
Angular-CLI kaynak kodu bana ilham verdi: Bileşen şablonlarını templateUrl
özelliğini template
ile değiştirerek ve değeri gerçek HTML kaynağına bir require
çağrısı yaparak dahil ettiklerini öğrendim.
AOT derleyicisini kullanıyorsanız, tsconfig.app.json
dosyasını ayarlayarak düğüm tipi tanımlarını eklemeniz gerekir:
"compilerOptions": {
"types": ["node"],
...
},
...