私は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
とNot HttpClientModule
を注入する必要があります。次に.map((res:any) => res.json())
を削除する必要がなくなります。新しいHttpClient
はデフォルトでレスポンスの本体を提供するため、最後にHttpClientModule
を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");
}
}
これをコンポーネントに追加します。
@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);
});
}
}
あなたは直接あなたのJSONをインポートする、別の解決策があります。
コンパイルするには、typings.d.tsファイルでこのモジュールを宣言してください。
declare module "*.json" {
const value: any;
export default value;
}
あなたのコードで
import { data_json } from '../../path_of_your.json';
console.log(data_json)
Webサーバからファイルを読むのではなく、ローカルファイルを実際に読む方法を探しているときにこの問題を発見しました。これを「リモートファイル」と呼びます。
require
を呼び出すだけです。
const content = require('../../path_of_your.json');
Angular-CLIのソースコードは私に影響を与えました。私は、templateUrl
プロパティをtemplate
に、そして値を実際のHTMLリソースへのrequire
呼び出しに置き換えることによってコンポーネントテンプレートが含まれることを知りました。
AOTコンパイラを使用する場合は、tsconfig.app.json
を調整してノードタイプ定義を追加する必要があります。
"compilerOptions": {
"types": ["node"],
...
},
...
Angular 7の場合は、次の手順に従ってjsonデータを直接インポートしました。
Tsconfig.app.jsonで:
"resolveJsonModule": true
に"compilerOptions"
を追加する
サービスまたはコンポーネントの場合:
import * as exampleData from '../example.json';
その後
private example = exampleData;
import data from './data.json';
export class AppComponent {
json:any = data;
}
これを試して
サービスにコードを書く
import {Observable, of} from 'rxjs';
jSONファイルのインポート
import Product from "./database/product.json";
getProduct(): Observable<any> {
return of(Product).pipe(delay(1000));
}
コンポーネント内
get_products(){
this.sharedService.getProduct().subscribe(res=>{
console.log(res);
})
}