私はAngular 5を使用しており、angular-cliを使用してサービスを作成しました。
私がやりたいのは、Angular 5のローカルjsonファイルを読み込むサービスを作ることです。
これは私が作ったものです。ちょっと困っています...。
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));
}
}
どうしたらこれを完成させることができますか?
まず、HttpClient
ではなく、HttpClientModule
を注入する必要があります。
次に、.map((res:any) => res.json())
を削除しなければなりません。新しいHttpClient
はデフォルトでレスポンスのボディを与えてくれるので、これ以上は必要ないでしょう。
:
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");
}
}
これをコンポーネントに追加します。
@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);
});
}
}
Webサーバーからファイルを読むのではなく、本当にローカルファイルを読む方法を探していたところ、この質問を見つけました("remote file"と呼びたい)。
単に require
を呼び出すだけです。
const content = require('../../path_of_your.json');
Angular-CLIのソースコードに触発されました。templateUrlプロパティを
templateに、その値を実際の HTML リソースへの
require` 呼び出しに置き換えることで、コンポーネント テンプレートをインクルードしていることがわかりました。
AOTコンパイラを使用する場合は、tsconfig.app.json
を調整してノードタイプの定義を追加する必要があります。
"compilerOptions": {
"types": ["node"],
...
},
...