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，那么你需要在公共文件夹中遵循相同的结构，类似于资产文件夹。

Answer 5

您可以在angular2

中使用 Http 提供程序

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

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

这将返回本地JSON文件。

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

5 个答案: