Ein Artikel zum schnellen Verständnis des Lebenszyklus und der Hook-Funktionen von Angular und Ionic

Eckig

erreichen

Zunächst muss nicht viel über die Implementierungsmethode gesagt werden. Die Verwendung der Hook-Funktion erfordert die Implementierung der entsprechenden Schnittstelle bei der Definition

Exportklasse ListPage implementiert OnInit {
  Konstruktor() {}

  ngOnInit() {
    // Code hier
  }
}

Aufrufreihenfolge

1.Konstruktor

Als erstes wird der Konstruktor ausgeführt. Wenn der Konstruktor ausgeführt wird, sind viele Variablen wie @Input und @ViewChild nicht vorhanden. Es ist am besten, verwandte Operationen in ngOnInit zu schreiben.

2. ngOnChanges

Es wird ausgelöst, wenn sich der Bindungswert der aktuellen Komponente @Input/@Output ändert.
Darüber hinaus wird @Input nur ausgelöst, wenn sich die Referenz ändert, sofern es sich um ein Objekt handelt.

3. ngOnInit

Wird aufgerufen, nachdem der erste ngOnChanges abgeschlossen ist. Es wird nur einmal ausgeführt.

4. ngDoCheck

Vom Entwickler definierte Änderungserkennung.

5. ngAfterContentInit

Wird einmal ausgeführt, wenn der Komponenteninhalt initialisiert wird

6. ngAfterContentChecked

Der auf die Komponente projizierte Inhalt wird nach jedem ngDoCheck-Aufruf ausgelöst.

7. ngAfterViewInit

Wird einmal ausgeführt, wenn die Komponente und ihre Unterkomponentenansichten initialisiert werden

8. ngAfterViewChecked

Wird nach jedem ngDoCheck-Aufruf einer Komponente und ihrer untergeordneten Ansichten ausgelöst.

9. ngOnDestroy

Wird aufgerufen, bevor die Komponente zerstört wird.

Beachten

• Nicht alle Daten sind im Konstruktor vorhanden, @ViewChild @ViewChildren @Input und andere Werte sind noch nicht gebunden
• Jede Änderungserkennung löst ngDoCheck aus, siehe Sehr leistungsintensiv, mit Vorsicht verwenden

Ionisch

Sie können auf den Link oben klicken, um das Originaldokument anzuzeigen. Ich werde die wichtigsten Punkte hervorheben.

Der Lebenszyklus ist in der Abbildung dargestellt. Zusätzlich zum von Angular bereitgestellten Lebenszyklus fügt Ionic mehrere Ereignisse hinzu:

• ionViewWillEnter Die Routing-Komponente wird in der Ansicht angezeigt
• ionViewDidEnter Die Routenkomponente wurde in der Ansicht angezeigt

ionViewWillEnter wird nach ngOnInit ausgelöst und ionViewDidEnter wird ausgelöst, nachdem der Übergangseffekt des Seitenwechsels endet

• ionViewWillLeave Die Komponente, die im Begriff ist, die aktuelle Route zu verlassen
• ionViewDidLeave Die Komponente, die die aktuelle Route verlassen hat

ionViewWillLeave wird zuerst aufgerufen und ionViewDidLeave wird erst aufgerufen, wenn der Übergang zur neuen Seite erfolgreich ist (nachdem ionViewDidEnter für die neue Seite ausgelöst wurde).

Komponenten, die ion-nav oder ion-router-outlet verwenden, sollten nicht die Änderungserkennungsstrategie OnPush verwenden, da diese dazu führt, dass Lebenszyklus-Hooks wie ngOnInit nicht ausgelöst werden. Darüber hinaus werden asynchron geänderte Daten möglicherweise nicht richtig wiedergegeben.

Wie handhabt Ionic den Lebenszyklus einer Seite?

Der von Ionic verwendete Routing-Outlet ist <ion-router-outlet />, der <router-outlet /> von Angular erweitert und auf Mobilgeräten für ein besseres Erlebnis sorgen kann.

Wenn Sie von einer Seite zu einer neuen Seite springen, speichert Ionic die alte Seite im DOM und verbirgt sie vor der Ansicht. Dadurch kann der Status der vorherigen Seite, z. B. die Bildlaufposition und die Seitendaten, beibehalten werden, sodass Sie beim Zurückkehren von der neuen Seite zur vorherigen Seite diese nicht neu laden müssen und der Seitenübergang reibungsloser erfolgt.

Die Seite wird erst zerstört, wenn sie den Stapel verlässt. Daher entspricht der Zeitpunkt der Auslösung von ngOnInit und ngOnDestroy möglicherweise nicht Ihren Vorstellungen.

Beispielsweise ist A die Detailseite und Sie gehen zu Seite B, um die Daten zu ändern. Nachdem die Änderung abgeschlossen ist, kehren Sie von Seite B zu Seite A zurück.
Wenn die Datenerfassungsmethode von Seite A in ngOnInit geschrieben ist, wird bei der Rückkehr von B nach A ngOnInit nicht ausgelöst, was offensichtlich nicht den Geschäftsanforderungen entspricht.
Die Erfassung dieser Daten kann daher in ionViewWillEnter geschrieben werden, sodass sie bei der Rückkehr von B nach A ausgelöst und aktualisiert werden kann.

Routenwächter

Ionic 3 hatte früher zwei Hook-Funktionen, ionViewCanEnter und ionViewCanLeave, die verwendet wurden, um zu bestimmen, ob eine Seite betreten/verlassen werden konnte. Sie wurden im Allgemeinen verwendet, um Zugriffsrechte einzuschränken oder eine zweite Bestätigungsaufforderung anzuzeigen, bevor die Bearbeitungsseite verlassen wurde. Diese beiden Funktionen sind veraltet. Ionic 4 und höher verwenden den offiziellen Routing Guard von Angular.

Zusammenfassen

Dies ist das Ende dieses Artikels über den Lebenszyklus und die Hook-Funktionen von Angular und Ionic. Weitere relevante Inhalte zum Lebenszyklus und den Hook-Funktionen von Angular und Ionic finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!