在angular中，如何引用本地json文件并显示？

Question

因为才开始学习angular，想做个小demo，拿取json文件并显示在前端页面中。
但是对于这块有点不懂，angular的官方文档，在引用这块，这看的不是很懂。
希望有一些文章推荐或者demo。

Answer 1

把json文件改为js文件并且export出去这个json对象，然后在你需要的地方import这个json对象使用就行了。
运行在浏览器里的纯前端是不允许直接读取本机里的任何文件的，因为这样肯定会不安全。
只能通过用户的上传操作读取到文件，你可以用<input type="file">来获取用户上传的文件，然后使用new FileReader()中的readAsText读取到文件内容，然后把字符串通过JSON.parse解析出来
或者在webpack里加上对应的json文件loader，就可以直接import进来用了

如下

//webpack.config.js

module.exports = {
  module: {
    loaders: [
      {
        test: /\.json$/,
        loader: 'json-loader'
      }
    ]
  }
}

Answer 2

简单点，把json的内容写到一个js文件里export。
在其他ts里import即可

---

非要使用json,可以本地使用ajax get json

Answer 3

json文件在你本机吗？如果是的后，受限于浏览器同源安全策略，获取不到。
除非你写一个html，直接用浏览器打开。

Answer 4

推荐楼主到官网看下这个案例，https://angular.cn/start/star... 检索运费价格部分
其中有用到本地json文件。
简单说，json文件在 assets 目录下，可以在服务里定义方法，通过Angular的内置http客户端获取。
关键源码如下：

getShippingPrices() {
    return this.http.get<{type: string, price: number}[]>('/assets/shipping.json');
  }

具体可参考开头的链接案例。

Answer 5

我感觉你可以是想使用json文件来快速的模拟后台的返回值。
最少有以下三种实现方案：

---

第一种：直接返回json文件。此时，只需要将json文件放到src/assets文件夹（不可版本的assets文件夹位置可能不一样）中即可，比如我们将sample.json放进去，然后直接在C层中如下获取：

    this.httpClient
      .get('assets/sample.json')
      .subscribe(data => console.log(data);

示例代码：https://stackblitz.com/edit/angular-ivy-bzv82a

第二种则是可以直接使用require把文件引进来：

    this.message1 = require('./sample1.json');

示例代码：https://stackblitz.com/edit/angular-ivy-bzv82a

第三种适用于有一些逻辑处理的，比如想实现用户名登录成功、登录失败的简单的逻辑。此方法需要借助第三方库，然后建立模拟的API，然后在请求这个API，就会返回模拟数据：

0. npm install @yunzhi/ng-mock-api

1. 建立API文件

   import { from } from 'rxjs/dist/types';
   import { MockApiInterface, ApiInjector } from '@yunzhi/ng-mock-api';
   export class SampleApi implements MockApiInterface {
     getInjectors(): ApiInjector<any>[] {
    return [
      new ApiInjector({
        method: 'GET',
        url: 'sample',
        result: { message: 'yunzhi mock api' }
      })
    ];
     }
   }

2. 设置拦截器

     providers: [
    {
      provide: HTTP_INTERCEPTORS,
      multi: true,
      useClass: MockApiInterceptor.forRoot([SampleApi])
    }
     ],

3. 发起请求

     ngOnInit(): void {
    this.httpClient.get('sample').subscribe(data => (this.message = data));
     }

   示例代码：https://stackblitz.com/edit/angular-ivy-wvtj83

关于@yunzhi/ng-mock-api的更多说明可参考：https://www.npmjs.com/package/@yunzhi/ng-mock-api

希望能帮到你。

最后Angular小白建议学习Angular入门实例教程