Angular でローカル JSON ファイルをインポートする方法についての簡単な説明

この記事では、Angularにローカル JSON ファイルをインポートする方法を紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

#1. 最初のタイプ

Angular は、Typescript のの助けを借りて、6.1 から Typescript2.9 をサポートします。新機能では、importを使用して、任意の Typescript モジュールにローカル JSON ファイルを直接インポートできます。 [関連する推奨事項: "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

component/command/ に JSON ファイルをインポートします

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

2. 2 番目のメソッド

Angular の組み込みhttpCLientサービス

2.1 ステップ 1

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

src/assets/json/data)。 json

##2.2 ステップ 2

httpClientModuleモジュールをインポートします。コードは次のとおりです。 ##

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

コンポーネント/コマンド/サービスで

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

import { Component } from &#39;@angular/core&#39;; import { HttpClient } from &#39;@angular/common/http&#39;; @Component({ selector: &#39;app-second-way&#39;, 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); }); } }

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

ファイル。例:

.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 のさらなる構成が必要であるというエラー メッセージが表示される場合は、

構成を確認する必要があります。プロジェクトにファイルを追加します。オプションがあります: include, 設定に含まれていることを確認してください。 *.d.tsのパス、例:

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

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