浅析Angular中怎么导入本地JSON文件

Angular中导入本地JSON文件

1. 第一种

Angular从6.1+开始支持TyPEscript2.9+，借助Typescript的新特性，我们可以通过使用 import 在任何Typescript模块里直接导入本地的JSON文件。【相关教程推荐：《angular教程》】

要启用这个新特性，需要在Angular中执行以下几个步骤：

1.1 步骤一

在项目源码目录下任意位置创建JSON文件，例如：

src/assets/json/data.json

1.2 步骤二

在 tsconfig.json 文件中的 compilerOptions 选项下设置如下代码：

{
  ...,  "compilerOptions": {
    ...,    "resolveJsonModule": true,    "ESModuleinterop": true  }
}
    

其中：

• resolveJsonModule 允许导入 .json 后缀文件
• esModuleInterop 允许导入模块里没有默认导出的module，这个对于 .json 文件是必须的

1.3 步骤三

在组件/指令/服务中的导入JSON文件，代码如下：

// 你的JSON文件路径import data From '../../assets/json/data.json';
    

2. 第二种

使用Angular内置的 httpCLient 服务

2.1 步骤一

在项目源码目录下任意位置创建JSON文件，例如：

src/assets/json/data.json

2.2 步骤二

在app.module.ts文件中导入 httpClientModule 模块，代码如下：

import {
 HttpClientModule }
     from '@angular/common/http';
@NgModule({
  imports: [..., HttpClientModule]}
)export class AppModule {
}
    

2.3 步骤三

在组件/指令/服务中使用 httpClient 导入JSON文件，代码如下：

import {
 component }
     from '@angular/core';
import {
 HttpClient }
     from '@angular/common/http';
@Component({
      selector: 'app-second-way',  template: `div>
{
{
jsonDataResult | json}
}
`}
)export class SecondWayComponent {
      jsonDataResult: any;
    constructor(PRivate http: HttpClient) {
          this.http.get('assets/json/data.json').subscribe((res) =>
 {
            this.jsonDataResult = res;
            console.LOG('--- result :: ',  this.jsonDataResult);
      }
    );
  }
}
    

3. 第三种

3.1 步骤一

在项目源码目录下任意位置创建JSON文件，例如：

src/assets/json/data.json

3.2 步骤二

在放置json文件的目录下创建一个 *.d.ts 的文件，例如：

我们在 src/assets/JSON 文件夹下创建 data-typings.d.ts
注意：你可以在src根目录下创建这个文件，这样的话可以全局被声明；另外文件名是任意的，但是后缀名必须是 .d.ts

declare module '*.json' {
      const value: any;
      export default value;
}
    

3.3 步骤三

在组件/指令/服务中使用 httpClient 导入JSON文件，代码如下：

// 你的JSON文件路径import * as data from '../../assets/json/data.json';
    // 或者像这样导入也可以import data from '../../assets/json/data.json';
    

注意事项 :
如果不生效，提示需要进一步配置resolveJsonModule的错误信息，则你需要检查项目里的 tsconfig.app.json 配置文件，其中有一选项：include，确保里边配置里* .d.ts 的路径，例如：

{
	...,  "include": [  	"src/**/*.d.ts"  ]}
    

更多编程相关知识，请访问：编程视频！！

以上就是浅析Angular中怎么导入本地JSON文件的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！