[解決済み] Angularのasync/await `ngOnInit` について

質問

私は現在、Angularのresp.RxJSを置き換えることの長所と短所を評価しています。 Observable をプレーンな Promise を使用できるように async と await を追加し、より直感的なコードスタイルを得ることができます。

私たちの典型的なシナリオの一つです。あるデータを ngOnInit . 使用方法 Observables を使えば、そうなります。

ngOnInit () {
  this.service.getData().subscribe(data => {
    this.data = this.modifyMyData(data);
  });
}

を返すと Promise から getData() を使用し、代わりに async と await となる。

async ngOnInit () {
  const data = await this.service.getData();
  this.data = this.modifyMyData(data);
}

さて、明らかに、Angularは、その ngOnInit が async . これは問題ないと思っています：私のアプリは以前と同じように動作します。しかし OnInit インターフェイスを見ると、この関数は明らかにそのように宣言されていません。 async :

ngOnInit(): void;

では -- 要するに。私がここでやっていることは妥当でしょうか？それとも、予期せぬ問題にぶつかるのでしょうか？

どのように解決するのですか？

今までと何ら変わりはありません。 ngOnInit はPromiseを返し、呼び出し側はそのPromiseを無視します。 これは、呼び出し側がメソッド内のすべてが終了するのを待たずに処理を進めることを意味します。 この具体的なケースでは、ビューの設定が終了し、ビューが起動する前に this.data が設定される前にビューが起動されるかもしれないことを意味します。

これは、以前と同じ状況です。 呼び出し側はサブスクリプションが終了するのを待たず、おそらくアプリを起動する前に this.data が入力される前にアプリを起動する可能性があります。 ビューが data に依存しているのなら、おそらく何らかの ngIf を設定し、アクセスできないようにしている可能性があります。

個人的には、その意味を理解している限り、厄介だとか悪い習慣だとは思っていません。 しかし ngIf は面倒です (どちらの方法でも必要でしょう)。 私は個人的に、この状況を回避できるように、意味のあるところではルートリゾルバを使用するように移行しました。 ルートがナビゲーションを終了する前にデータがロードされ、ビューがロードされる前にデータが利用可能であることを知ることができます。