Eine kurze Diskussion zum Importieren lokaler JSON-Dateien in Angular

In diesem Artikel erfahren Sie, wie Sie lokale JSON-Dateien in Angular importieren. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

1. Das erste

Angular unterstützt Typescript2.9+ ab 6.1+. Mit den neuen Funktionen können wir import in jedem Typescript-Modul direkt importieren Dateien. [Verwandte Empfehlung: „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“ in der Datei tsconfig.json fest: 🎜

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

🎜Unter ihnen: 🎜

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

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 Angulars integrierten httpCLient-Dienst🎜

🎜2.1 Schritt 1🎜 h4>🎜Irgendwo im Quellcodeverzeichnis des Projekts Erstellen Sie eine JSON-Datei am Speicherort, zum Beispiel: 🎜

🎜src/assets/json/data.json🎜

🎜2.2 Schritt 2🎜

🎜In der App Importieren Sie das Modul httpClientModule in die Datei .module.ts. Der Code lautet wie folgt: 🎜rrreee

🎜2.3 Schritt 3🎜

🎜In Components/Instructions/Services Use httpClient to import JSON files, lautet der Code wie folgt: 🎜rrreee

🎜3. Der dritte Typ🎜🎜

🎜3.1 Schritt 1🎜

🎜Erstellen Sie eine JSON-Datei an einer beliebigen Stelle im Quellcodeverzeichnis des Projekts, zum Beispiel: 🎜🎜src/assets/json/data.json🎜

🎜3.2 Schritt 2🎜

🎜Erstellen Sie einen *.d.ts-Datei in dem Verzeichnis, in dem die JSON-Datei abgelegt ist, zum Beispiel: 🎜<blockquote>🎜Wir befinden uns in src/ Erstellen Sie data-typings.d.ts im Ordner asset/json<br>🎜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🎜🎜 sein</blockquote>rrreee<h4 data-id="heading -11">🎜3.3 Schritt 3🎜</h4>🎜Verwenden Sie <code>httpClient in der Komponente/dem Befehl/im Dienst, um die JSON-Datei zu importieren:🎜rrreee🎜🎜Hinweise :🎜
Wenn es nicht wirksam wird und eine Fehlermeldung angezeigt wird, dass eine weitere Konfiguration von „resolveJsonModule“ erforderlich ist, müssen Sie dort die Konfigurationsdatei tsconfig.app.json überprüfen ist eine Option: Stellen Sie sicher, dass * 🎜.d.ts in der Konfiguration enthalten ist 🎜 Pfad, zum Beispiel: 🎜rrreee🎜Weitere Programmierkenntnisse finden Sie unter: 🎜Programmiervideo🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonEine kurze Diskussion zum Importieren lokaler JSON-Dateien in Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!