本篇文章给大家介绍一下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: `{{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文件的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2706933.html
赞 (0)
