Une brève analyse de la façon d'importer des fichiers JSON locaux dans Angular

Cet article vous présentera comment importer des fichiers JSON locaux dans Angular J'espère qu'il vous sera utile !

Importez des fichiers JSON locaux dans Angular

1. Le premier

Angular prend en charge Typescript2.9+ à partir de 6.1+ Avec les nouvelles fonctionnalités de Typescript, nous pouvons utiliser l'importation . Importez directement des fichiers JSON locaux dans n'importe quel module Typescript. [Tutoriels associés recommandés : "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.jsonTutoriel angulaire"]

Pour activer cette nouvelle fonctionnalité, vous devez effectuer les étapes suivantes dans Angular :

1.1 Étape 1

🎜🎜Créez un fichier JSON n'importe où dans le répertoire du code source du projet . Par exemple : 🎜

🎜src/assets/json/data.json🎜

🎜🎜1.2 Étape 2🎜🎜🎜Définissez le code suivant sous l'option compilerOptions dans le tsconfig.json fichier : 🎜<pre class="brush:js;toolbar:false;">{ ..., &quot;include&quot;: [ &quot;src/**/*.d.ts&quot; ] }</pre>🎜Parmi eux : 🎜<ul> <li>🎜resolveJsonModule🎜 permet l'import de fichiers de suffixe <code>.json

🎜esModuleInterop🎜 permet l'import de modules qui ne sont pas exportés par défaut. Ceci est pour le fichier .json requis

🎜🎜1.3 Étape 3🎜🎜🎜Importez le fichier JSON dans le composant/commande/service, le Le code est le suivant :🎜rrreee🎜🎜🎜2 . La deuxième méthode🎜🎜🎜🎜utilise le service httpCLient intégré d'Angular🎜🎜🎜2.1 Étape 1🎜🎜🎜Créez un fichier JSON n'importe où dans le répertoire du code source du projet, par exemple : 🎜

🎜src/assets/json/data.json🎜

🎜🎜2.2 Étape 2🎜🎜🎜Importez le module httpClientModule dans l'application .module.ts, le code est le suivant : 🎜rrreee🎜🎜2.3 Étape 3🎜 🎜🎜Utilisez httpClient dans le composant/commande/service pour importer le fichier JSON. 🎜rrreee🎜🎜🎜3. La troisième méthode🎜🎜🎜🎜🎜3.1 Étape 1🎜🎜🎜Dans le répertoire du code source du projet Créez un fichier JSON à n'importe quel emplacement, par exemple : 🎜

🎜src/assets/json/data .json🎜

🎜🎜3.2 Étape 2🎜🎜🎜Créez un * dans le répertoire où est placé le fichier json, par exemple : 🎜<blockquote>🎜Nous créons. data-typings.d.ts dans le dossier src/assets/json<br>🎜Remarque🎜 : Vous pouvez créer ce fichier dans le répertoire racine src, afin qu'il puisse être déclaré globalement. De plus, le nom du fichier est arbitraire, mais le suffixe doit être 🎜.d.ts🎜🎜</blockquote>rrreee🎜🎜3.3 Étape 3. 🎜🎜🎜 Utilisez <code>httpClient dans le composant/commande/service pour importer le fichier JSON. Le code est le suivant :🎜rrreee🎜🎜Remarques :🎜
S'il ne prend pas effet et vous invite. un message d'erreur indiquant qu'une configuration supplémentaire de solveJsonModule est requise, vous devez alors vérifier le fichier de configuration tsconfig.app.json dans le projet. Il existe une option : assurez-vous que le chemin de * 🎜. .d.ts🎜 est dans la configuration, par exemple : 🎜rrreee🎜Plus de connaissances liées à la programmation, veuillez visiter : 🎜Vidéos de programmation🎜 ! ! 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!