Angular 2 - 外部ファイルからJSONデータをローカル変数に書き込む方法

Question

Angular 2チュートリアルapp.component.tsファイルに直接変数を読み込んでいます。例えば、{Foo}インターフェイスを介してデータをプルする下記のvar BAR。

import {Component} from 'angular2/core'; 
import {Foo} from './foo'; 

@Component({ 
    etc. 
}); 

export class AppComponent { 
    bar = BAR; 
} 

var BAR: Foo[] = [ 
    { 'id': 1 }, 
    { 'id': 2 } 
]; 

ただし、ローカルJSONファイルにBARのデータがあります。私は{HTTP_PROVIDER}が必要であるとは思わない。外部ファイルからJSONデータを取得するにはどうすればよいですか？

Answer 1

httpを使用してファイルをロードする必要がある場合。ここで

は、HTTP経由でローカルのJSONファイルをロードする方法の例です。ここ

this.result = {friends:[]}; 
this.http.get('./friends.json').map((res: Response) => res.json()).subscribe(res => this.result = res);      

詳細：あなたの場合http://www.syntaxsuccess.com/viewarticle/angular-2.0-and-http

Answer 2

ジュストはあなたの静的フォルダ（/資産にあなたの.jsonファイルを置きます角を使用している）、それは動作するはずです。

Answer 3

あなたがWWWフォルダにローカルのJSONファイルを配置を確認してくださいangular2

にのHttpプロバイダを使用することができます。

getLocalFile(){ 
    return this.http.get('./localFileName.json'). 
     map(res => res.json()); 
} 

これにより、ローカルのJSONファイルが返されます。

Answer 4

import { BAR } from './BarConfig'; let bar= BAR;

またはより良いを次のように後でBARを使用し、それを使用

ようBarConfig.tsまたは一部として、このコンテンツそれ保存

​​

でファイルを作成します。必要な場所に直接

Answer 5

jsonファイルを作成し、ファイル内にjsonの詳細を格納し、そのファイルを以下のように使用することをお勧めします。

あなたは角度-CLIを使用している場合

は、（アプリケーションディレクトリに対して平行）ディレクトリ

return this.http.get('<json file path inside assets folder>.json')) 
    .map((response: Response) => { 
     console.log("mock data" + response.json()); 
     return response.json(); 
    } 
    ) 
    .catch(this.handleError); 
} 

注資産フォルダ内のJSONファイルを保管してください：ここで、あなただけの資産が資産/ JSON/oldjsonのようにフォルダ内のパスを指定する必要があります。 jsonの場合、/json/oldjson.jsonのようなパスを記述する必要があります。

webpackを使用している場合は、同じ構造のパブリックフォルダ内の同様のアセットフォルダと同じ構造にする必要があります。