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

Cet article vous présentera comment importer des fichiers JSON locaux dans Angular. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

1. Le premier type

Angular prend en charge Typescript2.9+ à partir de 6.1+, avec l'aide de nouvelle fonctionnalité , nous pouvons directement importer des fichiers JSON locaux dans n'importe quel module Typescript en utilisant . [Recommandations associées : "importTutoriel 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 fichier

 : tsconfig.json

{
  ...,
  "compilerOptions": {
    ...,
    "resolveJsonModule": true,
    "esModuleInterop": true
  }
}

Parmi eux :

• resolveJsonModule Permet l'importation de fichiers de suffixe .json
• esModuleInterop Permet l'importation de modules qui ne sont pas exportés par défaut Ceci est nécessaire pour les fichiers .json

1.3 Étape 3

Importez le fichier JSON dans le composant/commande/service, le code est le suivant :

// 你的JSON文件路径
import data from '../../assets/json/data.json';

2. Le deuxième type

Utiliser le service

intégré d'Angular

httpCLient

2.1 Étape 1

Créer 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

dans le fichier app.module.ts Module, le code est le suivant :

import { HttpClientModule } from '@angular/common/http';
@NgModule({
  imports: [..., HttpClientModule]
})
export class AppModule {}

httpClientModule

2.3 Étape 3

Utilisez

dans le composant/commande/service pour importer le fichier JSON, le code est le suivant :

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

httpClient

3 Le troisième type

3.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

3.2 Étape 2

Créez un fichier, par exemple :

Nous créons data-typings.d. ts dans le dossier src/assets/json*.d.ts

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

declare module '*.json' {
  const value: any;
  export default value;
}

; 3.3 Étape 3

Utilisez dans le composant/commande/service pour importer le fichier JSON Le code est le suivant :

// 你的JSON文件路径
import * as data from '../../assets/json/data.json';
// 或者像这样导入也可以
import data from '../../assets/json/data.json';

Remarques :

httpClientSi cela ne prend pas effet et affiche un message d'erreur indiquant qu'une configuration supplémentaire de solveJsonModule est requise, vous devez vérifier le fichier de configuration

dans le projet. Il existe une option : inclure Make. assurez-vous que *

.d.ts est inclus dans la configuration. Chemin, par exemple :

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

Pour plus de connaissances sur la programmation, veuillez visiter : tsconfig.app.jsonVidéo 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!