Heim > Artikel > Web-Frontend > Eine kurze Analyse, wie man lokale JSON-Dateien in Angular importiert
In diesem Artikel erfahren Sie, wie Sie lokale JSON-Dateien in Angular importieren. Ich hoffe, er hilft Ihnen!
1. Das erste
Angular unterstützt Typescript2.9+ ab 6.1+. Mit den neuen Funktionen können wir import verwenden
Importieren Sie lokale JSON-Dateien direkt in ein beliebiges Typescript-Modul. [Empfohlene verwandte Tutorials: „import
在任何Typescript模块里直接导入本地的JSON文件。【相关教程推荐:《angular教程》】
要启用这个新特性,需要在Angular中执行以下几个步骤:
1.1 步骤一
在项目源码目录下任意位置创建JSON文件,例如:
src/assets/json/data.json
1.2 步骤二
在 tsconfig.json
文件中的 compilerOptions 选项下设置如下代码:
{ ..., "compilerOptions": { ..., "resolveJsonModule": true, "esModuleInterop": true } }
其中:
.json
后缀文件.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
Angular Tutorial“]
🎜src/assets/json/data.json🎜🎜🎜1.2 Schritt 2🎜🎜🎜Legen Sie den folgenden Code unter der Option „compilerOptions“ im
tsconfig.json
fest > Datei: 🎜{ ..., "include": [ "src/**/*.d.ts" ] }🎜Darunter: 🎜
.json
-Suffixdateien.json
-Datei erforderlichhttpCLient
-Dienst🎜🎜🎜2.1 Schritt 1🎜🎜🎜Erstellen Sie eine JSON-Datei an einer beliebigen Stelle das Quellcodeverzeichnis des Projekts, zum Beispiel: 🎜🎜src/assets/json/data.json🎜🎜🎜2.2 Schritt 2🎜🎜🎜Importieren Sie das
httpClientModule
-Modul in die App .module.ts-Datei, der Code lautet wie folgt: 🎜rrreee🎜🎜2.3 Schritt 3🎜 🎜🎜Verwenden Sie httpClient
in der Komponente/dem Befehl/im Dienst, um die JSON-Datei zu importieren. Der Code lautet wie folgt: 3. Die dritte Methode .json🎜🎜🎜3.2 Schritt 2🎜🎜🎜Erstellen Sie einen * in dem Verzeichnis, in dem die d.ts
-Datei abgelegt ist, zum Beispiel: 🎜🎜Wir erstellen data-typings.d.ts im Ordner src/assets/jsonrrreee🎜🎜3.3 sein 🎜🎜🎜 Verwenden Sie
🎜Hinweis🎜: Sie können diese Datei im src-Stammverzeichnis erstellen, damit sie global deklariert werden kann; außerdem ist der Dateiname beliebig, aber das Suffix muss 🎜.d.ts🎜🎜
httpClient
in der Komponente/dem Befehl/im Dienst, um die JSON-Datei zu importieren. Der Code lautet wie folgt:🎜rrreee🎜🎜Hinweise:🎜 tsconfig.app.json
im Projekt überprüfen. Es gibt eine Option: Einschließen, stellen Sie sicher, dass der Pfad von * 🎜 ist .d.ts🎜 in der Konfiguration, zum Beispiel: 🎜rrreee🎜Weitere Programmierkenntnisse finden Sie unter: 🎜Programmiervideos🎜! ! 🎜Das obige ist der detaillierte Inhalt vonEine kurze Analyse, wie man lokale JSON-Dateien in Angular importiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!