Werfen wir einen Blick auf die verwandten Konzepte der Angular10-Komponenten in einem Artikel
青灯夜游
Freigeben: 2021-07-27 10:06:14
nach vorne
2120 Leute haben es durchsucht
Dieser Artikel gibt Ihnen eine Einführung in die Komponenten in angular10 und stellt die Komponentenelemente, den Komponentenlebenszyklus, die Kommunikation zwischen Komponenten und die grundlegende Verwendung dynamischer Komponenten vor.
Es gibt nur zwei Lebenszyklen, die häufig in der Arbeit verwendet werden (ngOninit und ngOnDestroy), und die anderen Lebenszyklen sind es Sehr selten verwendet; wenn Sie jedoch den Lebenszyklus von Komponenten beherrschen, werden Sie ein tieferes Verständnis für Winkel haben.
Lebenszyklusbedeutung
Der Lebenszyklus einer Komponenteninstanz beginnt, wenn Angular die Komponentenklasse instanziiert und die Komponentenansicht und ihre Unteransichten rendert. Der Lebenszyklus wird immer von einer Änderungserkennung begleitet, wobei Angular prüft, ob sich datengebundene Eigenschaften ändern, und Ansichts- und Komponenteninstanzen nach Bedarf aktualisiert. Der Lebenszyklus endet, wenn Angular die Komponenteninstanz zerstört und die von ihr gerenderte Vorlage aus dem DOM entfernt. Anweisungen haben einen ähnlichen Lebenszyklus wie Angular, der während der Ausführung Instanzen erstellt, aktualisiert und zerstört.
Anwendung: Ihre App kann Lebenszyklus-Hook-Methoden verwenden, um wichtige Ereignisse im Komponenten- oder Direktiven-Lebenszyklus auszulösen, um neue Instanzen zu initialisieren, bei Bedarf eine Änderungserkennung zu initiieren, auf Aktualisierungen während der Änderungserkennung zu reagieren und bei Bedarf Instanzen zu löschen .
So implementieren Sie Lebenszyklusereignisse
Jede Komponente oder Direktive kann einen oder mehrere Lebenszyklus-Hooks implementieren, die zum entsprechenden Zeitpunkt auf der Komponenten- oder Direktiveninstanz ausgeführt werden können.
Jede Schnittstelle verfügt über eine eindeutige Hook-Methode und ihre Namen bestehen aus dem Schnittstellennamen und dem Präfix ng. Die Hook-Methode der OnInit-Schnittstelle heißt beispielsweise ngOnInit(). Wenn Sie diese Methode in einer Komponenten- oder Direktivenklasse implementieren, ruft Angular sie auf, nachdem zunächst die Eingabeeigenschaften der Komponente oder Direktive überprüft wurden
ng generate component <project-name> // 创建一个组件
ng g c <project-name> // 缩写
Nach dem Login kopieren
Lebenszyklusübersicht
Hook
Timing
Zweck
Hinweis
ngOnChanges()
Wird aufgerufen, wenn sich der Wert des gebundenen Eingabeattributs ändert, der erste Aufruf muss vor ngOnInit()
erfolgen se wenn Angular Legt eine datengebundene Eingabeeigenschaft fest oder setzt sie zurück. Diese Methode akzeptiert ein SimpleChanges-Objekt mit den aktuellen und vorherigen Eigenschaftswerten
Dies kommt sehr häufig vor, sodass alles, was Sie hier tun, erhebliche Auswirkungen auf die Leistung hat.
ngOnInit()
Wird aufgerufen, nachdem die erste Runde von ngOnChanges() abgeschlossen ist, nur einmal aufgerufen.
Initialisieren Sie die Direktive/Komponente, nachdem Angular zum ersten Mal die Datenbindung anzeigt und die Eingabeeigenschaften der Direktive/Komponente festlegt. Ein guter Ort für eine Komponente, um Anfangsdaten zu erhalten
Es ist wichtig, nur einmal aufzurufen
ngDoCheck()
direkt nach ngOnChanges() jedes Mal, wenn eine Änderungserkennung durchgeführt wird, und ngOnInit(), wenn eine Änderungserkennung für durchgeführt wird Zum ersten Mal.
Erkennen und reagieren Sie, wenn Änderungen auftreten, die Angular nicht selbst erkennen kann oder will.
Es passiert so oft wie ngOnChanges
ngAfterContentInit()
Der erste Aufruf von ngDoCheck(), nur einmal.
Wird aufgerufen, nachdem Angular externen Inhalt in die Komponentenansicht oder die Ansicht projiziert, in der sich die Direktive befindet.
Nur einmal aufgerufen
ngAfterContentChecked()
ngAfterContentInit() und nach jedem ngDoCheck()
Wird immer dann aufgerufen, wenn Angular den in die Komponente oder Direktive projizierten Inhalt überprüft hat.
ngAfterViewInit()
Der erste Aufruf von ngAfterContentChecked() erfolgt nur einmal.
Wird nach der Initialisierung der Komponentenansicht und ihrer Unteransichten aufgerufen.
Nur einmal aufrufen
ngAfterViewChecked()
ngAfterViewInit() und jedes Mal nach ngAfterContentChecked().
Wird jedes Mal aufgerufen, nachdem die Änderungserkennung der Komponentenansicht und Unteransicht abgeschlossen ist.
ngOnDestroy()
Wird aufgerufen, bevor Angular die Direktive/Komponente zerstört.
Wird aufgerufen und bereinigt, bevor jede Direktive/Komponente von Angular zerstört wird. Abonnieren Sie das Observable und trennen Sie den Event-Handler hier, um Speicherlecks zu verhindern.
Abmelden von beobachtbaren Objekten, Löschen von Timern, Aufheben der Registrierung aller von diesem Befehl registrierten Rückrufe global oder in Anwendungsdiensten.
Das obige ist der detaillierte Inhalt vonWerfen wir einen Blick auf die verwandten Konzepte der Angular10-Komponenten in einem Artikel. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn