Angular でローカル JSON ファイルをインポートする方法の簡単な分析

この記事では、Angular でローカル JSON ファイルをインポートする方法を紹介します。お役に立てば幸いです。

ローカル JSON ファイルを Angular にインポートする

1. 最初のタイプ

Angular は 6.1 から Typescript2.9 をサポートします。Typescript の 新機能により、import を使用してローカル JSON ファイルを任意の Typescript モジュールに直接インポートできます。 [関連チュートリアルの推奨事項: "angular チュートリアル"]

この新機能を有効にするには、Angular で次の手順を実行する必要があります:

1.1 ステップ 1

プロジェクトのソース コード ディレクトリ内の任意の場所に JSON ファイルを作成します (例:

src/assets/json/data.json

#1.2 ステップ 2

tsconfig.json ファイルの CompilerOptions オプションの下に次のコードを設定します:

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

• resolveJsonModule .json サフィックス ファイルのインポートを許可します
• esModuleInterop によってエクスポートされないモジュールのインポートを許可しますデフォルトです。これは 用です。json ファイルが必要です

1.3 ステップ 3

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

2. 2 番目のメソッド

httpCLient を使用します。 service

2.1 手順 1

src)。 /assets/json/data.json

2.2 ステップ 2

httpClientModule モジュールをインポートします

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

2.3 ステップ 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 番目のタイプ

3.1 ステップ 1

src/assets /json/data.json

3.2 ステップ 2

*.d.ts ファイルを作成します。例:

データ型を作成します。 src/assets/json フォルダー内の d.ts

#Note: このファイルを src ルート ディレクトリに作成すると、グローバルに宣言できるようになります。また、ファイル名は任意ですが、サフィックスは .d.ts

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

ログイン後にコピー

にする必要があります。

3.3 ステップ 3

httpClient を使用して JSON ファイルをインポートします。コードは次のとおりです:

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

注: これが有効にならず、resolveJsonModule のさらなる構成が必要であるというエラー メッセージが表示される場合は、
tsconfig.app.json 構成を確認する必要があります。プロジェクトにファイルを追加します。オプションがあります: include, 設定に含まれていることを確認してください。 * .d.ts のパス、例:

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

プログラミング ビデオ をご覧ください。 ！

以上がAngular でローカル JSON ファイルをインポートする方法の簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。