Angular 2 - 如何用来自外部文件的 JSON 数据填充局部变量
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36143683/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular 2 - how to fill a local variable with JSON data from an external file
提问by ebakunin
The Angular 2 tutorials I have read place variables directly in the app.component.ts file. For example var BARbelow, which pulls data though the {Foo}interface.
我直接在 app.component.ts 文件中读取了 Angular 2 教程。例如var BAR下面，它通过{Foo}接口拉取数据。
import {Component} from 'angular2/core';
import {Foo} from './foo';
@Component({
etc.
});
export class AppComponent {
bar = BAR;
}
var BAR: Foo[] = [
{ 'id': 1 },
{ 'id': 2 }
];
However, I have the data for BAR in a local JSON file. I don't believe {HTTP_PROVIDER} is necessary. How would I go about getting the JSON data from the external file?
但是，我在本地 JSON 文件中有 BAR 的数据。我不认为 {HTTP_PROVIDER} 是必要的。我将如何从外部文件中获取 JSON 数据？
回答by William Ardila
Create a file with this content
用这个内容创建一个文件
export const BAR= [
{ 'id': 1 },
{ 'id': 2 }
];
export const BAR= [
{ 'id': 1 },
{ 'id': 2 }
];
save it as BarConfig.tsor some like
将其另存为BarConfig.ts或类似
later use it as follows
以后使用如下
import { BAR } from './BarConfig';
let bar= BAR;
import { BAR } from './BarConfig';
let bar= BAR;
or even better, use BARdirectly where you needed
甚至更好，BAR直接在您需要的地方使用
回答by TGH
HTTP_PROVIDERis needed if you want to load a file using http.
HTTP_PROVIDER如果要使用 http 加载文件，则需要此选项。
Here is an example of how to load a local json file over http:
以下是如何通过 http 加载本地 json 文件的示例：
this.result = {friends:[]};
this.http.get('./friends.json').map((res: Response) => res.json()).subscribe(res => this.result = res);
More details here: http://www.syntaxsuccess.com/viewarticle/angular-2.0-and-http
更多细节在这里：http: //www.syntaxsuccess.com/viewarticle/angular-2.0-and-http
回答by Nacim Idjakirene
Juste put your .json file in your static folder (/assets if you are using the angular cli) and it should work.
Juste 将您的 .json 文件放在您的静态文件夹中（/assets，如果您使用的是 angular cli），它应该可以工作。
回答by Vijay Gajera
Best option is to create json file and store json details inside file and call that file using like below.
最好的选择是创建 json 文件并将 json 详细信息存储在文件中，然后使用如下所示调用该文件。
If you using angular-cli Keep the json file inside Assets folder (parallel to app dir) directory
如果您使用 angular-cli 将 json 文件保存在 Assets 文件夹（与应用程序目录平行）目录中
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);
}
Note: here you only need to give path inside assets folder like assets/json/oldjson.json then you need to write path like /json/oldjson.json
注意：这里你只需要在assets/json/oldjson.json之类的assets文件夹中提供路径然后你需要像/json/oldjson.json这样写路径
If you using webpack then you need to follow above same structure inside public folder its similar like assets folder.
如果您使用 webpack，那么您需要在公共文件夹中遵循上述相同的结构，其类似于资产文件夹。
回答by Deepu Varghese
You can use the Httpprovider in angular2
您可以在 angular2 中使用Http提供程序
Make sure you place your local json file in the www folder.
确保将本地 json 文件放在 www 文件夹中。
getLocalFile(){
return this.http.get('./localFileName.json').
map(res => res.json());
}
This will return you the local JSON file.
这将返回本地 JSON 文件。
