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

app.module.ts ファイルに

httpClientModule モジュールをインポートします。コードは次のとおりです。 ##<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">import { HttpClientModule } from &amp;#39;@angular/common/http&amp;#39;; @NgModule({ imports: [..., HttpClientModule] }) export class AppModule {}</pre><div class="contentsignin">ログイン後にコピー</div></div>

2.3 ステップ 3

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

httpClient

を使用して JSON ファイルをインポートします。コードは次のとおりです。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">import { Component } from &amp;#39;@angular/core&amp;#39;; import { HttpClient } from &amp;#39;@angular/common/http&amp;#39;; @Component({ selector: &amp;#39;app-second-way&amp;#39;, template: `&lt;div&gt;{{jsonDataResult | json}}` }) export class SecondWayComponent { jsonDataResult: any; constructor(private http: HttpClient) { this.http.get(&amp;#39;assets/json/data.json&amp;#39;).subscribe((res) =&gt; { this.jsonDataResult = res; console.log(&amp;#39;--- result :: &amp;#39;, this.jsonDataResult); }); } }</pre><div class="contentsignin">ログイン後にコピー</div></div>

3. 3 番目のタイプ

3.1 ステップ 1

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

src/assets/json/data.json

3.2 ステップ 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 ステップ 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 サイトの他の関連記事を参照してください。