本篇文章给大家介绍一下Angular中导入本地JSON文件的方法，希望对大家有所帮助！
Angular中导入本地JSON文件
1. 第一种
Angular从6.1+开始支持Typescript2.9+，借助Typescript的新特性，我们可以通过使用 import 在任何Typescript模块里直接导入本地的JSON文件。【相关教程推荐：《angular教程》】
要启用这个新特性，需要在Angular中执行以下几个步骤：
1.1 步骤一
在项目源码目录下任意位置创建JSON文件，例如：
1.2 步骤二
在 tsconfig.json 文件中的 compilerOptions 选项下设置如下代码：
复制代码1
2
3
4
5
6
7
8
{
...,
"compilerOptions": {
...,
"resolveJsonModule": true,
"esModuleInterop": true
}
}
登录后复制其中：
- resolveJsonModule 允许导入
.json后缀文件 - esModuleInterop 允许导入模块里没有默认导出的module，这个对于
.json文件是必须的
1.3 步骤三
在组件/指令/服务中的导入JSON文件，代码如下：
复制代码1
2
// 你的JSON文件路径
import data from '../../assets/json/data.json';
登录后复制2. 第二种
使用Angular内置的 httpCLient 服务
2.1 步骤一
在项目源码目录下任意位置创建JSON文件，例如：
2.2 步骤二
在app.module.ts文件中导入 httpClientModule 模块，代码如下：
复制代码1
2
3
4
5
import { HttpClientModule } from '@angular/common/http';
@NgModule({
imports: [..., HttpClientModule]
})
export class AppModule {}
登录后复制2.3 步骤三
在组件/指令/服务中使用 httpClient 导入JSON文件，代码如下：
复制代码1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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文件，例如：
3.2 步骤二
在放置json文件的目录下创建一个 *.d.ts 的文件，例如：
复制代码1
2
3
4
declare module '*.json' {
const value: any;
export default value;
}
登录后复制3.3 步骤三
在组件/指令/服务中使用 httpClient 导入JSON文件，代码如下：
复制代码1
2
3
4
// 你的JSON文件路径
import * as data from '../../assets/json/data.json';
// 或者像这样导入也可以
import data from '../../assets/json/data.json';
登录后复制注意事项 :
如果不生效，提示需要进一步配置resolveJsonModule的错误信息，则你需要检查项目里的 tsconfig.app.json 配置文件，其中有一选项：include，确保里边配置里* .d.ts 的路径，例如：
复制代码1
2
3
4
5
6
{
...,
"include": [
"src/**/*.d.ts"
]
}
登录后复制
最后
以上就是开心鱼最近收集整理的关于浅析Angular中怎么导入本地JSON文件的全部内容，更多相关浅析Angular中怎么导入本地JSON文件内容请搜索靠谱客的其他文章。
发表评论 取消回复