Angular 8で動的にJSONをロードする

Question

だから私は、私のAngular 8アプリで設定JSONファイルから値をロードする必要があります。

最初は静的にロードしていたので、JSが省略されたとき - JSONからの設定済みの価値が1回読み取られ、二度と読んでいました。

それから私はそれを動的にロードしようとしました：

app.component.ts：

_ngOnInit(): void {
    let appInfo = "";
    import("../assets/config/config.json").then(config => {
       appInfo = config.appInfo;
    });
    //using appInfo here - empty string.
}
_

うまくいかなかった。再びそれは設定されていませんでした。しかし、それは実際に私のconfig.jsonに存在しています。

私が試すことができる別のアプローチについて誰かが考えていますか？

編集：私は私のApp.component.tsのngoninitでこれにアクセスしたいです。私の事件は、App Startupがconfig.jsonでAppInfo値を更新する前にです。起動時にアクセスしたいです。また、提案をお願いします、私はそれらを試して、どちらがうまくいくかを更新します。

****編集：動的読み込み技術のどれも私のために働いていませんでした。私はそれを避けるために可能な限りすべての試みましたが、私はそれを試してみました。

Answer 1

この のStackBlitz Link のworking demo

• rxjsの使用を角度で活用できます。ここでは、まず、RXJS of()演算子を使用してjsonフォルダ内のassetsファイルの参照を取得できます。
• of()演算子はJSONファイルを観測可能に変換しています。将来的にはJSONファイルから何も変更された場合、私たちは同じ時点で変更値を取得することができます[Live Update to Template HTMLファイル]]。
• 観察可能で購読して購読していない角度を角度で自動的に観測するためにasync pipeを使用します。

App.component.tsはです

import {of} from 'rxjs';
import * as data from '../assets/data';

export class AppComponent  {
   dataJson = of(data);
} 

App.component.htmlはです

<ng-container *ngIf="dataJson | async as data">
    <table class="table table-striped table-dark">
       <thead>
           <tr>
               <th scope="col">Id</th>
               <th scope="col">Name</th>
           </tr>
       </thead>
       <tbody>
           <tr *ngFor="let row of data['default'] ; let i=index">
               <td> {{row.id }} </td>
               <td> {{row.CarName}}</td>
           </tr>
       </tbody>
    </table>
</ng-container>

これで、JSONファイルのフォームの更新値の後、アセットフォルダのフォルダに、すべての変更は再度書き直さなくてもテンプレートファイルに自動的に反映されます。