Angular中如何導(dǎo)入本地JSON文件

這篇文章主要講解了“Angular中如何導(dǎo)入本地JSON文件”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“Angular中如何導(dǎo)入本地JSON文件”吧！

Angular中導(dǎo)入本地JSON文件

1. 第一種

Angular從6.1+開始支持Typescript2.9+，借助Typescript的新特性，我們可以通過使用 import 在任何Typescript模塊里直接導(dǎo)入本地的JSON文件。【相關(guān)教程推薦：《angular教程》】

要啟用這個(gè)新特性，需要在Angular中執(zhí)行以下幾個(gè)步驟：

1.1 步驟一

在項(xiàng)目源碼目錄下任意位置創(chuàng)建JSON文件，例如：

src/assets/json/data.json

1.2 步驟二

在 tsconfig.json 文件中的 compilerOptions 選項(xiàng)下設(shè)置如下代碼：

{
  ...,
  "compilerOptions": {
    ...,
    "resolveJsonModule": true,
    "esModuleInterop": true
  }
}

其中：

• resolveJsonModule 允許導(dǎo)入 .json 后綴文件

• esModuleInterop 允許導(dǎo)入模塊里沒有默認(rèn)導(dǎo)出的module，這個(gè)對(duì)于 .json 文件是必須的

1.3 步驟三

在組件/指令/服務(wù)中的導(dǎo)入JSON文件，代碼如下：

// 你的JSON文件路徑
import data from '../../assets/json/data.json';

2. 第二種

使用Angular內(nèi)置的 httpCLient 服務(wù)

2.1 步驟一

在項(xiàng)目源碼目錄下任意位置創(chuàng)建JSON文件，例如：

src/assets/json/data.json

2.2 步驟二

在app.module.ts文件中導(dǎo)入 httpClientModule 模塊，代碼如下：

import { HttpClientModule } from '@angular/common/http';
@NgModule({
  imports: [..., HttpClientModule]
})
export class AppModule {}

2.3 步驟三

在組件/指令/服務(wù)中使用 httpClient 導(dǎo)入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 步驟一

在項(xiàng)目源碼目錄下任意位置創(chuàng)建JSON文件，例如：

src/assets/json/data.json

3.2 步驟二

在放置json文件的目錄下創(chuàng)建一個(gè) *.d.ts 的文件，例如：

我們?cè)?src/assets/json 文件夾下創(chuàng)建 data-typings.d.ts
注意： 你可以在src根目錄下創(chuàng)建這個(gè)文件，這樣的話可以全局被聲明；另外文件名是任意的，但是后綴名必須是 .d.ts

declare module '*.json' {
  const value: any;
  export default value;
}

3.3 步驟三

在組件/指令/服務(wù)中使用 httpClient 導(dǎo)入JSON文件，代碼如下：

// 你的JSON文件路徑
import * as data from '../../assets/json/data.json';
// 或者像這樣導(dǎo)入也可以
import data from '../../assets/json/data.json';

注意事項(xiàng) :
如果不生效，提示需要進(jìn)一步配置resolveJsonModule的錯(cuò)誤信息，則你需要檢查項(xiàng)目里的 tsconfig.app.json 配置文件，其中有一選項(xiàng)：include，確保里邊配置里* .d.ts 的路徑，例如：

{
	...,
  "include": [
  	"src/**/*.d.ts"
  ]
}

感謝各位的閱讀，以上就是“Angular中如何導(dǎo)入本地JSON文件”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)Angular中如何導(dǎo)入本地JSON文件這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！