Angular中导进当地JSON文件信息方式

本文给大家介绍一下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文件信息具体内容，大量欢迎关注AdminJS其他类似文章！