Angular中導入本地JSON文件

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

成都創(chuàng)新互聯(lián)成立以來不斷整合自身及行業(yè)資源、不斷突破觀念以使企業(yè)策略得到完善和成熟，建立了一套“以技術(shù)為基點，以客戶需求中心、市場為導向”的快速反應體系。對公司的主營項目，如中高端企業(yè)網(wǎng)站企劃 / 設(shè)計、行業(yè) / 企業(yè)門戶設(shè)計推廣、行業(yè)門戶平臺運營、APP應用開發(fā)、手機網(wǎng)站開發(fā)、微信網(wǎng)站制作、軟件開發(fā)、綿陽主機托管等實行標準化操作，讓客戶可以直觀的預知到從成都創(chuàng)新互聯(lián)可以獲得的服務效果。

1. 第一種

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

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

1.1 步驟一

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

src/assets/json/data.json

1.2 步驟二

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

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

其中：

  • resolveJsonModule允許導入 .json 后綴文件

  • esModuleInterop允許導入模塊里沒有默認導出的module，這個對于 .json 文件是必須的

1.3 步驟三

在組件/指令/服務中的導入JSON文件，代碼如下：

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

2. 第二種

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

2.1 步驟一

在項目源碼目錄下任意位置創(chuàng)建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 步驟一

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

src/assets/json/data.json

3.2 步驟二

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

我們在 src/assets/json 文件夾下創(chuàng)建 data-typings.d.ts
注意： 你可以在src根目錄下創(chuàng)建這個文件，這樣的話可以全局被聲明；另外文件名是任意的，但是后綴名必須是 .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文件”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學習!

當前名稱：Angular中導入本地JSON文件
當前鏈接：http://muchs.cn/article34/ghggse.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗、定制網(wǎng)站、網(wǎng)站設(shè)計、品牌網(wǎng)站設(shè)計、品牌網(wǎng)站制作、品牌網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

成都定制網(wǎng)站網(wǎng)頁設(shè)計