91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

Angular中導入本地JSON文件

發布時間:2021-05-12 10:53:38 來源:億速云 閱讀:252 作者:小新 欄目:web開發

這篇文章主要介紹了Angular中導入本地JSON文件,具有一定借鑒價值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。

1. 第一種

Angular從6.1+開始支持Typescript2.9+,借助Typescript的新特性,我們可以通過使用 import 在任何Typescript模塊里直接導入本地的JSON文件。

要啟用這個新特性,需要在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文件”這篇文章對大家有幫助,同時也希望大家多多支持億速云,關注億速云行業資訊頻道,更多相關知識等著你來學習!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

安平县| 股票| 永清县| 鹤庆县| 黔江区| 仁寿县| 菏泽市| 鸡西市| 桦甸市| 英吉沙县| 舟曲县| 定远县| 西畴县| 侯马市| 瑞丽市| 方山县| 长宁区| 通城县| 文昌市| 平安县| 金湖县| 鄂托克旗| 三明市| 怀集县| 河南省| 文登市| 十堰市| 土默特右旗| 承德县| 那曲县| 平湖市| 同仁县| 奉贤区| 靖远县| 沙湾县| 江油市| 喀喇沁旗| 云浮市| 宁城县| 桓台县| 德昌县|