web-dev-qa-db-ja.com

Ionic 4 / Angular7ライフサイクルフックはページごとに1回だけ呼び出されます

ionic 3では、ionViewWillEnterionViewWillLeaveのようなライフサイクルイベントがありました。しかし、Ionic 4では、このイベントは、 Angular ngOnInitngOnDestroyなどのライフサイクルイベント。

私のアプリケーションでは、ユーザーがページに出入りするときに、いくつかの特定の操作を実現する必要があります。たとえば、ユーザーが別のページをプッシュした場合(Ionic 4)で前方に移動)、アプリは新しいページがプッシュされる前に現在のページに対してionViewWillLeaveを実行します。ユーザーがプッシュから戻った場合ページ(Ionic 4)で後方に移動)アプリは前のページに対してionViewWillEnterを実行します。

このイベントをngOnInitとngOnDestroyに置き換えようとしました。ただし、このイベントは、ページごとに1回だけ呼び出されます。たとえば、別のページにルーティングして(Ionic 4のルートをナビゲート)、最初のページに戻った場合、最初のページのngOnInitイベントとngOnDestroyイベントは再度呼び出されません。

ユーザーがページに出入りするたびにイベントを呼び出すにはどうすればよいですか?

3
Natanael

私が間違えました。ドキュメントには次のように書かれています。

V4では、Angularが提供する典型的なイベントを利用できるようになりました。ただし、場合によっては、ルート変更中にコンポーネントのアニメーションが終了したときに発生するイベントにアクセスしたい場合があります。この場合、ionViewWillEnter、ionViewDidEnter、ionViewWillLeave、およびionViewDidLeaveはV3から移植されています。これらのイベントを使用して、Ionic独自のアニメーションシステムとアクションを調整します。

IonViewDidLoad、ionViewCanLeave、ionViewCanEnterなどの古いイベントは削除されており、適切なAngular代替手段を使用する必要があります。 移行ガイド-ライフサイクルイベント

3
Natanael

****

Ionic 4のライフサイクル

****

Ionic4はAngularのルーターナビゲーションを拡張します
Ionic 4ではスタック機能が導入されています(Ionic 3)のように)
Ionic 4はAngularに新しいライフサイクルフックを追加します:
ionViewWillEnter —ページに入るときに発生します(スタックから戻ってきた場合も)
ionViewDidEnter —入力後に発生します(スタックから戻ってきた場合も)
ionViewWillLeave —ページが離れる場合に発生します(スタックに保持される場合も)
ionViewDidLeave —ページが離れた後に発生します(スタックに保持されている場合も)
ionViewWillUnload — In AngularここではngOnDestroyを使用する必要があるため、起動しません
ionViewDidLoad(ngOnInitと同じであるため)と2つのナビゲーションガードを除いて、Ionic 3からのすべてのライフサイクルフックは引き続き使用可能です
ngOnInitは、スタックに配置した後にページに戻った場合はトリガーされません。デフォルトでは、前方に移動すると、現在のページがスタックに保持されるため、ngOnDestroyはトリガーされません。新しいページをrootとして設定した場合(navController.navigateRoot()))、または後方に移動した場合にのみ、スタックから削除されます
Observablesをキャンセルする場合は、ionViewWillLeaveまたはionViewDidLeaveを実行し、ionViewWillEnterまたはionViewDidEnterで再度サブスクライブします。
DOMインスペクターを見ると、ページがまだスタックにあることがわかります。Angularルーターを使用すると、ページがスタックに追加されます。お勧めします。 Ionic Angular NavControllerを使用するには、ここで新しいスタック機能を使用できます。

0
Supriya