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

我读过的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数据？如果要使用HTTP加载文件，则需要HTTP\u提供程序

以下是如何通过http加载本地json文件的示例：

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

---

此处的更多详细信息：

只需将.json文件放在静态文件夹中（/assets，如果您使用AngularCLI），它应该可以工作。

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

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

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

---

这将返回本地JSON文件。

使用此内容创建一个文件

导出常量条=[
{'id'：1}，
{'id'：2}
];

将其另存为
BarConfig.ts
或类似文件

以后使用它如下

从“/BarConfig”导入{BAR}；
设bar=bar

或者更好，在需要的地方直接使用
BAR
最好的选择是创建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);
}

返回此.http.get（'.json'））
.map（（响应：响应）=>{
log（“模拟数据”+response.json（））；
返回response.json（）；
}
)
.接住（这个.把手错误）；
}

注意：这里您只需要在assets文件夹中提供路径，如assets/json/oldjson.json，然后您需要编写路径，如/json/oldjson.json

如果您使用的是webpack，那么您需要在公用文件夹（类似于资产文件夹）中遵循上述相同的结构。
但工作是什么意思？它会被加载到范围内吗？谢谢。。这很有效。。执行此操作时，请确保引用url中的资产文件夹。e、 g:fetch（“assets/data.json”）。然后（…）需要对您的解决方案进行更多解释问题是：在不使用http的情况下，我们如何做到这一点？这实际上是返回一个可观察的而不是作为对象的数据。他要求从本地文件而不是类导入json数据。@FlorianLeigeb不是一个，它是一个在本例中导出的声明，是一个常量（从到）。如果你愿意，你可以用一个变量来代替常量。@WilliamArdila我试过这种方法，它是有效的。这是使用全局配置的好方法吗？（例如：保持图像文件夹路径不变，并在任何地方使用）@HashanKanchana有点离题主题：关于配置请参阅