角2：サービスが非同期で初期化されるまでコンポーネントのレンダリングを延期する

Question

私は、できるだけ希薄な（トラフィック単位の）ままにし、必要なときにのみ（API URLからの）特定のデータセットをロードしたい。

データのロードを担当するサービスは、依存関係としてuiコンポーネントコンストラクタに渡されます。コンポーネントテンプレートには、サービスのプロパティとメソッドへの参照が多数あります。コンストラクタでデータのロードを開始できますが、ロードが非同期で行われるため、データが到着した時点でコンポーネントが既にレンダリングされています。

基本的には、サービスがAPIから読み込まれた新しいデータで初期化されるまでコンポーネントレンダリングを延期する方法を探しています。現在、私は、サービスが初期化されているかどうかをチェックし、初期化が完了したら最終ルートに移動するコンポーネントを持つ基本ルートを持っています。しかし、1つのビューに2つのルートが必要なため、これはあまり意味がありません。

Answer 1

このようなことができます。この非同期呼び出しを使用すると、コンポーネント

this.myService.myAsyncCall().subscribe((res)=>{ 
    this.field = res.data.list; 
}) 

のフィールドへの応答を割り当てていると言うことができます

this.myService.myAsyncCall().subscribe((res)=>{...}) 

内側：

のは、あなたがこのようなあなたの非同期呼び出しからデータを取得しているとしましょうテンプレート内に*ngIfを使用できるようにテンプレートがレンダリングされないようにしてください。

<div *ngIf="field && field.length && field.length > 0"> 
    ... 
</div> 

これは単なるアプローチです。小規模な操作にはセーフナビゲーションオペレータ（?）を使用できますが、のコードについてはの情報が提供されていないため、一般的な回答をしています。