温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

Angular中如何导入本地JSON文件

发布时间:2021-10-20 10:33:10 来源:亿速云 阅读:308 作者:iii 栏目:web开发

这篇文章主要讲解了“Angular中如何导入本地JSON文件”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“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文件”的内容了,经过本文的学习后,相信大家对Angular中如何导入本地JSON文件这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI