Angular 4スクリプトでJSONファイルを読む方法

Question

私は、プロジェクトワークスペースにローカルに保存したJSONファイルを読む必要があります。なぜなら、私はcomponent.tsファイルを読む必要があるからです。

基本的な手順はありますか？

Answer 1

あなたはそれは簡単ですHTTPリクエスト

getJsonData(){ 
    let jsonUrl = 'Your json file path'; 
    return this.http.get(jsonUrl) 
     .map((response: Response) => { 
     const data = response.json(); 
     return data; }); 
} 

Answer 2

を使用してJSONデータを読み取ることができます。コンポーネント内で直接行うことも、サービスを使用することもできます。アプリケーションのロジックを分離するサービスを作成する方が良いでしょう。で、覚えておいてください

@Injectable() 
export class DataService { 
    constructor(private http: HttpClient) { } //<-- inject HttpClient 
    getData() { 
     return this.http.get('../assets/data.json') 
    }).catch(
     (error: Response) => { 
     return Observable.throw(error); 
    }); 
} 

コンポーネントあなたのサービス

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent implements OnInit { 
    constructor(private dataService:DataService){} //<--inject the service 

    data:any //<--a variable 
    ngOnInit(){ 
    this.dataService.getData().subscribe((data)=> 
    { 
     this.data=data 
    } 
} 

を（将来的には、データにアクセスするための方法を変更たいと思う場合は、サービスを変更する必要があります）あなたのapp.moduleはサービスを宣言します

@NgModule({ 
    ... 
    providers: [DataService,..] 
} 

もちろん、コンポーネント内ですべてを行うことはできますが、dis承認済み