淺談Angular中導入本地JSON檔的方法-js教程-PHP中文網

淺談Angular中導入本地JSON檔的方法

青灯夜游

發布： 2021-05-12 10:32:43

轉載

2308 人瀏覽過

本篇文章跟大家介紹如何在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 &#39;../../assets/json/data.json&#39;;

登入後複製

2. 第二種

使用Angular內建的httpCLient 服務

2.1 步驟一

#在專案原始碼目錄下任意位置建立JSON文件，例如：

src/assets/json/data.json

2.2 步驟二

在app.module.ts檔案中匯入httpClientModule 模組，程式碼如下：

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

登入後複製

#2.3 步驟三

#在元件/指令/服務中使用httpClient 匯入JSON文件，程式碼如下：

import { Component } from &#39;@angular/core&#39;;
import { HttpClient } from &#39;@angular/common/http&#39;;
@Component({
  selector: &#39;app-second-way&#39;,
  template: `<div>{{jsonDataResult | json}}`
})
export class SecondWayComponent {
  jsonDataResult: any;
  
  constructor(private http: HttpClient) {
      this.http.get(&#39;assets/json/data.json&#39;).subscribe((res) => {
        this.jsonDataResult = res;
        console.log(&#39;--- result :: &#39;,  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 &#39;*.json&#39; {
  const value: any;
  export default value;
}

登入後複製

3.3 步驟三

在元件/指令/服務中使用httpClient 匯入JSON文件，程式碼如下：

// 你的JSON文件路径
import * as data from &#39;../../assets/json/data.json&#39;;
// 或者像这样导入也可以
import data from &#39;../../assets/json/data.json&#39;;

登入後複製

注意事項 :
如果不生效，提示需要進一步配置resolveJsonModule的錯誤訊息，則你需要檢查專案裡的tsconfig.app.json 設定文件，其中有一個選項：include，確保裡邊配置裡* .d.ts 的路徑，例如：

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

登入後複製

更多程式相關知識，請造訪：程式設計影片！！

以上是淺談Angular中導入本地JSON檔的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！