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!

Lokale JSON-Dateien in Angular importieren

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
  }
}

其中：

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

Um diese neue Funktion zu aktivieren, müssen Sie die folgenden Schritte in Angular ausführen:

1.1 Schritt 1

🎜🎜Erstellen Sie eine JSON-Datei an einer beliebigen Stelle im Quellcodeverzeichnis des Projekts . Zum Beispiel: 🎜

🎜src/assets/json/data.json🎜

🎜🎜1.2 Schritt 2🎜🎜🎜Legen Sie den folgenden Code unter der Option „compilerOptions“ im tsconfig.jsonfest > Datei: 🎜

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

🎜Darunter: 🎜

• 🎜resolveJsonModule🎜 ermöglicht den Import von .json-Suffixdateien
• 🎜esModuleInterop🎜 ermöglicht den Import von Modulen, die werden standardmäßig nicht exportiert. Dies ist für die .json-Datei erforderlich

🎜🎜1.3 Schritt 3🎜🎜🎜Importieren Sie die JSON-Datei in die Komponente/den Befehl/den Dienst Der Code lautet wie folgt:🎜rrreee🎜🎜🎜2 Die zweite Methode🎜🎜🎜🎜verwendet den integrierten httpCLient-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/json
🎜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🎜🎜

rrreee🎜🎜3.3 sein 🎜🎜🎜 Verwenden Sie httpClient in der Komponente/dem Befehl/im Dienst, um die JSON-Datei zu importieren. Der Code lautet wie folgt:🎜rrreee🎜🎜Hinweise:🎜
Wenn er nicht wirksam wird, werden Sie aufgefordert eine Fehlermeldung, dass eine weitere Konfiguration von „resolveJsonModule“ erforderlich ist, dann müssen Sie die Konfigurationsdatei 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!