Analisis ringkas tentang cara mengimport fail JSON tempatan dalam Angular

Artikel ini akan memperkenalkan kepada anda cara mengimport fail JSON tempatan dalam Angular saya harap ia akan membantu anda!

Import fail JSON setempat dalam Angular

Jenis pertama

Angular menyokong Typescript2.9 bermula dari 6.1 Dengan ciri baharu Typescript, kami boleh mengimport terus fail JSON tempatan dalam mana-mana modul Typescript dengan menggunakan import. [Cadangan tutorial berkaitan: "tutorial sudut"]

Untuk mendayakan ciri baharu ini, anda perlu melakukan langkah berikut dalam Sudut:

1.1 Langkah 1

Buat fail JSON di mana-mana sahaja dalam direktori kod sumber projek, contohnya:

src/assets/json/data.json

1.2 Langkah 2

Tetapkan kod berikut di bawah pilihan compilerOptions dalam fail tsconfig.json:

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

Antaranya:

• resolveJsonModule membenarkan import .json fail akhiran
• esModuleInterop membenarkan import modul yang tidak dieksport secara lalai. Ini diperlukan untuk .json fail

1.3 Langkah 3

Import fail JSON dalam komponen/arahan/perkhidmatan, kodnya adalah seperti berikut:

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

2. Kaedah kedua

menggunakan perkhidmatan httpCLient terbina dalam Angular

2.1 Langkah 1

di mana-mana dalam direktori kod sumber projek Cipta fail JSON di lokasi, contohnya:

src/assets/json/data.json

2.2 Langkah 2

dalam Import modul httpClientModule ke dalam fail app.module.ts, kodnya adalah seperti berikut:

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

2.3 Langkah 3

Gunakan <🎜 dalam komponen/perintah/perkhidmatan > Import fail JSON, kodnya adalah seperti berikut: httpClient

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(&#39;assets/json/data.json&#39;).subscribe((res) => {
        this.jsonDataResult = res;
        console.log(&#39;--- result :: &#39;,  this.jsonDataResult);
      });
  }
}

3. Jenis ketiga

3.1 Langkah 1

src/assets/json/data.json

3.2 Langkah 2.

dalam direktori tempat json fail diletakkan, contohnya: *.d.ts

Kami mencipta data-taip dalam folder src/assets/json .d.ts

Nota: Anda boleh mencipta fail ini dalam direktori akar src, supaya ia boleh diisytiharkan secara global di samping itu, nama fail adalah sewenang-wenangnya, tetapi akhiran mestilah .d.ts

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

3.3 Langkah 3

dalam komponen/perintah/perkhidmatan untuk mengimport fail JSON Kodnya adalah seperti berikut: httpClient

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

Nota: Jika ia tidak berkuat kuasa dan menggesa mesej ralat bahawa konfigurasi lanjut resolveJsonModule diperlukan, maka anda perlu menyemak
fail konfigurasi dalam projek itu pilihan: sertakan. Pastikan * tsconfig.app.json.d.ts disertakan dalam laluan , contohnya:

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

! !

Atas ialah kandungan terperinci Analisis ringkas tentang cara mengimport fail JSON tempatan dalam Angular. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!