您好,登錄后才能下訂單哦!
這篇文章主要介紹了Angular中導入本地JSON文件,具有一定借鑒價值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
Angular從6.1+開始支持Typescript2.9+,借助Typescript的新特性,我們可以通過使用 import
在任何Typescript模塊里直接導入本地的JSON文件。
要啟用這個新特性,需要在Angular中執行以下幾個步驟:
在項目源碼目錄下任意位置創建JSON文件,例如:
src/assets/json/data.json
在 tsconfig.json
文件中的 compilerOptions 選項下設置如下代碼:
{ ..., "compilerOptions": { ..., "resolveJsonModule": true, "esModuleInterop": true } }
其中:
resolveJsonModule 允許導入 .json
后綴文件
esModuleInterop 允許導入模塊里沒有默認導出的module,這個對于 .json
文件是必須的
在組件/指令/服務中的導入JSON文件,代碼如下:
// 你的JSON文件路徑 import data from '../../assets/json/data.json';
使用Angular內置的 httpCLient
服務
在項目源碼目錄下任意位置創建JSON文件,例如:
src/assets/json/data.json
在app.module.ts文件中導入 httpClientModule
模塊,代碼如下:
import { HttpClientModule } from '@angular/common/http'; @NgModule({ imports: [..., HttpClientModule] }) export class AppModule {}
在組件/指令/服務中使用 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); }); } }
在項目源碼目錄下任意位置創建JSON文件,例如:
src/assets/json/data.json
在放置json文件的目錄下創建一個 *.d.ts
的文件,例如:
我們在 src/assets/json 文件夾下創建 data-typings.d.ts
注意: 你可以在src根目錄下創建這個文件,這樣的話可以全局被聲明;另外文件名是任意的,但是后綴名必須是 .d.ts
declare module '*.json' { const value: any; export default value; }
在組件/指令/服務中使用 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文件”這篇文章對大家有幫助,同時也希望大家多多支持億速云,關注億速云行業資訊頻道,更多相關知識等著你來學習!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。