Angular 2 - 如何使用外部文件中的JSON数据填充局部变量

Question

我读过的Angular 2教程直接在app.component.ts文件中放置变量。 例如下面的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 }
];

但是，我在本地JSON文件中有BAR的数据。 我不相信{HTTP_PROVIDER}是必要的。 我如何从外部文件中获取JSON数据？

Answer 1

使用此内容创建文件

export const BAR= [ { 'id': 1 }, { 'id': 2 } ];

将它保存为BarConfig.ts或类似的东西

以后使用如下

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

甚至更好，直接在需要的地方使用BAR

Answer 2

如果要使用http加载文件，则需要HTTP_PROVIDER 。

以下是如何通过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 3

Juste将你的.json文件放在你的静态文件夹中（如果你使用的是角度cli，那就是/ assets）它应该可以工作。

Answer 4

最好的选择是创建json文件并在文件中存储json细节，并使用如下所示调用该文件。

如果使用angular-cli将json文件保存在Assets文件夹（与app dir并行）目录中

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);
}

注意：这里你只需要在assets / json / oldjson.json之类的资源文件夹中给出路径，然后你需要编写像/json/oldjson.json这样的路径

如果你使用webpack，那么你需要在公共文件夹中遵循相同的结构，类似于assets文件夹。

Answer 5

您可以在angular2中使用Http提供程序

确保将本地json文件放在www文件夹中。

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

这将返回本地JSON文件。