Rumah > Artikel > hujung hadapan web > 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!
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:
.json
fail akhiran.json
fail1.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 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('assets/json/data.json').subscribe((res) => { this.jsonDataResult = res; console.log('--- result :: ', this.jsonDataResult); }); } }
3. Jenis ketiga
3.1 Langkah 1
Buat fail JSON di mana-mana sahaja dalam direktori kod sumber projek, contohnya:src/assets/json/data.json
3.2 Langkah 2.
Buat fail 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
Gunakan 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" ] }Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati: Video Pengaturcaraan
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!