本文摘自PHP中文网,作者青灯夜游,侵删。
本篇文章给大家介绍一下如何在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 选项下设置如下代码:
1 2 3 4 5 6 7 8 |
|
其中:
- resolveJsonModule 允许导入
.json
后缀文件 - esModuleInterop 允许导入模块里没有默认导出的module,这个对于
.json
文件是必须的
1.3 步骤三
在组件/指令/服务中的导入JSON文件,代码如下:
1 2 |
|
2. 第二种
使用Angular内置的 httpCLient
服务
2.1 步骤一
在项目源码目录下任意位置创建JSON文件,例如:
src/assets/json/data.json
2.2 步骤二
在app.module.ts文件中导入 httpClientModule
模块,代码如下:
1 2 3 4 5 |
|
2.3 步骤三
在组件/指令/服务中使用 httpClient
导入JSON文件,代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
|
3. 第三种
3.1 步骤一
在项目源码目录下任意位置创建JSON文件,例如:
src/assets/json/data.json
3.2 步骤二
在放置json文件的目录下创建一个 *.d.ts
的文件,例如:
我们在 src/assets/json 文件夹下创建 data-typings.d.ts
注意: 你可以在src根目录下创建这个文件,这样的话可以全局被声明;另外文件名是任意的,但是后缀名必须是 .d.ts
1 2 3 4 |
|
3.3 步骤三
在组件/指令/服务中使用 httpClient
导入JSON文件,代码如下:
1 2 3 4 |
|
注意事项 :
如果不生效,提示需要进一步配置resolveJsonModule的错误信息,则你需要检查项目里的 tsconfig.app.json
配置文件,其中有一选项:include,确保里边配置里* .d.ts 的路径,例如:
1 2 3 4 5 6 |
|
更多编程相关知识,请访问:编程视频!!
以上就是浅谈Angular中导入本地JSON文件的方法的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
Angular和vue.js的区别是什么?Angular和vue.js的深度对比
更多相关阅读请进入《Angular》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者