Detaillierte Erklärung des Lebenszyklus von Angular-Komponenten (Teil 2)

1. Haken anzeigen

Es gibt zwei Ansichts-Hooks: ngAfterViewInit und ngAfterViewChecked.

1. Was bei der Implementierung der Hooks ngAfterViewInit und ngAfterViewChecked zu beachten ist

Basierend auf dem Beispiel in „Übergeordnete Komponente ruft Methode untergeordnete Komponente auf“ implementieren Sie die Hooks ngAfterViewInit und ngAfterViewChecked in der übergeordneten Komponente.

Diese beiden Hook-Methoden werden aufgerufen, nachdem der gesamte Inhalt der Komponentenvorlage zusammengestellt und die Komponentenvorlage dem Benutzer präsentiert wurde.

@ViewChild('Kind1')
child1:Child1Component; //Referenz der untergeordneten Komponente in der übergeordneten Komponente abrufen ngOnInit(){
  dieses.child1.greeting("Tom");
}

ngAfterViewInit(){
  console.log("Die Ansicht der übergeordneten Komponente wird initialisiert");
}

ngAfterViewChecked(){
  console.log("Erkennung von Änderungen in der Ansicht der übergeordneten Komponente abgeschlossen");
}

Implementieren Sie diese beiden Hooks auch in der untergeordneten Komponente

Exportklasse Child1Component implementiert OnInit,AfterViewInit,AfterViewChecked{

  Konstruktor() { }

  ngOnInit() {
  }

  Begrüßung(Name: Zeichenfolge) {
    console.log("hallo" + name);
  }

  ngAfterViewInit(){
    console.log("Die Ansicht der Unterkomponente wurde initialisiert");
  }
  
  ngAfterViewChecked(){
    console.log("Erkennung der Änderungen in der Unterkomponentenansicht abgeschlossen");
  }
}

Im ngOnInit der übergeordneten Komponente wird die Methode greeting() der untergeordneten Komponente nicht direkt aufgerufen. Stattdessen wird sie alle 5 Sekunden über einen Timer aufgerufen.

ngOnInit(){
  setzeIntervall(()=>{
    dieses.child1.greeting("Tom");
  },5000);
} 

Zusammenfassen:

1. Init wird zuerst aufgerufen, dann geprüft

In 1 wird zuerst die Unterkomponentenansicht initialisiert und dann die Änderungserkennung der Unterkomponentenansicht abgeschlossen.

2. Unterkomponenten werden vor übergeordneten Komponenten zusammengebaut

In 2 können wir sehen, dass es zwei Initialisierungsaktionen für Unterkomponenten gibt, da in der übergeordneten Komponente zwei Unterkomponenten deklariert sind. Nachdem Unterkomponente Nr. 1 initialisiert und die Änderungserkennung abgeschlossen wurde, wird Unterkomponente Nr. 2 initialisiert und die Änderungserkennung abgeschlossen. Die Initialisierung der übergeordneten Komponente wird abgeschlossen, bevor sie aufgerufen wird, und dann wird die Änderungserkennung der übergeordneten Komponente abgeschlossen, bevor sie aufgerufen wird.

3. ngAfterViewInit wird nach Abschluss der Initialisierung nur einmal aufgerufen.

4. Nachdem der Timer die Methode ausgelöst hat, wird die Änderungserkennung der beiden untergeordneten Komponenten aufgerufen, und die Änderungserkennung der übergeordneten Komponente wird ebenfalls aufgerufen.

Auch wenn sich die Ansicht nicht geändert hat, wird die Änderungserkennung aufgerufen und alle im Hook ngAfterViewChecked() implementierten Methoden werden aufgerufen.

Daher muss der ngAfterViewChecked()-Hook präzise sein, um Leistungsprobleme zu vermeiden.

2. Verhindern Sie die Aktualisierung einer Ansicht, nachdem sie in einem Änderungserkennungszyklus zusammengestellt wurde

Beispiel:

Übergeordnete Komponente

Es gibt eine auf abc initialisierte Nachricht, die auf der Vorlage angezeigt wird.

Nachricht:Zeichenfolge='abc';

Ändern Sie den Nachrichtenwert in ngAfterViewInit der übergeordneten Komponente.

ngAfterViewInit(){
  console.log("Die Ansicht der übergeordneten Komponente wird initialisiert");
  diese.Nachricht="def";
} 

Ein Fehler wird gemeldet. Sowohl ngAfterViewInit() als auch ngAfterViewChecked() werden ausgelöst, nachdem die Ansicht zusammengestellt wurde. Wenn also die gebundenen Eigenschaften in der Komponente in diesen beiden Hooks aktualisiert werden und dadurch Änderungen in der Komponentenansicht ausgelöst werden, löst Angular eine Ausnahme aus.

Lösung:

Fügen Sie den Code in eine andere Zeitschleife ein.

ngAfterViewInit(){
  console.log("Die Ansicht der übergeordneten Komponente wird initialisiert");
  setzeTimeout(()=>{
    diese.Nachricht="def";
  },0);
}

2. Inhaltshaken

Enthält 2 projektionsbezogene Hooks, ngAfterContentInit()- und ngAfterContentChecked()-Hooks.

ngAfterContentInit, ngAfterContentChecked sind ähnlich zu ngAfterViewInit, ngAfterViewChecked.

ngAfterViewInit und ngAfterViewChecked werden aufgerufen, nachdem die Ansicht der gesamten Komponente zusammengestellt wurde.

ngAfterContentInit und ngAfterContentChecked werden aufgerufen, nachdem der projizierte Inhalt zusammengestellt wurde.

1. Beispiel für die Aufrufreihenfolge des Content Hooks

Implementieren Sie ngAfterContentInit, ngAfterContentChecked und ngAfterContentInit() in der übergeordneten Komponente.

Exportklasse AppComponent implementiert OnInit, AfterViewInit, AfterContentInit, AfterContentChecked{

ngAfterViewInit(){
  console.log("Die Ansicht der übergeordneten Komponente wird initialisiert");
}

ngAfterContentInit(){
  console.log("Initialisierung des Projektionsinhalts der übergeordneten Komponente abgeschlossen");
}
ngAfterContentChecked(){
  console.log("Erkennung von Inhaltsänderungen der Projektionskomponente der übergeordneten Komponente abgeschlossen");
}

Diese drei Schnittstellen sind auch in der Unterkomponente

Exportklasse Child2Component implementiert OnInit,AfterViewChecked,AfterContentInit,AfterContentChecked{

  Konstruktor() { }

  ngOnInit() {
  }
  ngAfterViewInit(){
    console.log("Die Ansicht der Unterkomponente wurde initialisiert");
  }
  
  ngAfterContentInit(){
    console.log("Initialisierung des Projektionsinhalts der Unterkomponente abgeschlossen");
  }
  ngAfterContentChecked(){
    console.log("Erkennung von Inhaltsänderungen bei Unterkomponentenprojektionen abgeschlossen");
  }
} 

Beim Zusammenstellen der Ansicht wird zuerst der projizierte Inhalt zusammengestellt, dann der Inhalt der Ansicht in der untergeordneten Komponente, und dann wird der Inhalt der übergeordneten Komponente selbst hinzugefügt. Anschließend wird die Ansicht der übergeordneten Komponente initialisiert.

2. Vorlageninhalte können im Content Hook geändert werden

Der Inhalt der Vorlage kann im Ansichts-Hook nicht geändert werden, da der Inhalt innerhalb der Vorlage nach der Zusammenstellung nicht mehr geändert werden kann. Aber es ist im Content-Hook möglich.

Da beim Aufruf des Content-Hooks noch nicht die gesamte Ansicht zusammengestellt wurde, wurde nur der projizierte Inhalt zusammengestellt.

Es wird kein Fehler gemeldet, wenn die Nachrichteninformationen im ngAfterContentInit-Hook in der übergeordneten Komponente geändert werden.

Exportklasse AppComponent implementiert OnInit, AfterViewInit, AfterContentInit, AfterContentChecked{
Nachricht:Zeichenfolge='abc';
ngAfterViewInit(){
  console.log("Die Ansicht der übergeordneten Komponente wird initialisiert");
}

ngAfterContentInit(){
  console.log("Initialisierung des Projektionsinhalts der übergeordneten Komponente abgeschlossen");
  diese.Nachricht='def';
}
ngAfterContentChecked(){
  console.log("Erkennung von Inhaltsänderungen der Projektionskomponente der übergeordneten Komponente abgeschlossen");
}
ngOnInit(){

} 

Abschluss

Die oben genannten vier Methoden befinden sich in der Phase der Attributinitialisierung: Der Konstruktor initialisiert das Objekt, ngOnChanges initialisiert die Eingabeattribute, ngOnInit initialisiert alle Attribute außer den Eingabeattributen und ngDoCheck führt eine Änderungsprüfung durch.

Diese vier Methoden werden so lange ausgeführt, bis allen Eigenschaften der gesamten Komponente die Werte zugewiesen sind, die ihnen zugewiesen werden sollen.

Die Komponente beginnt mit dem Rendern ihrer Ansicht, wobei sie zuerst den projizierten Inhalt rendert und dann die Hook-Methoden ngAfterContentInit und ngAfterContentChecked aufruft.

Wenn Unterkomponenten vorhanden sind, wird der Prozess der Unterkomponentenerstellung aufgerufen. Nachdem die Unterkomponente erstellt wurde oder keine Unterkomponente vorhanden ist, werden die Hook-Methoden ngAfterViewInit und ngAfterViewChecked aufgerufen, nachdem die Ansicht der gesamten Komponente initialisiert wurde.

An diesem Punkt wird die gesamte Komponente initialisiert und dem Benutzer zur Interaktion präsentiert.

Durch Benutzerinteraktion wird der Änderungserkennungsmechanismus von Angular ausgelöst. Wenn eine Änderung erkannt wird, werden alle Hook-Methoden mit implementierter Prüfung für alle aktiven Komponenten im aktuellen Komponentenbaum aufgerufen, um die Änderungen der aktuellen Komponente zu überprüfen. Wenn die Änderung dazu führt, dass sich die Eingabeeigenschaft einer Komponente ändert, wird auch ngOnChanges dieser Komponente aufgerufen.

Wenn eine Komponente aufgrund einer Änderung der Routingadresse zerstört wird, wird ngOnDestory() aufgerufen.

Zerstören Sie einige referenzierte Ressourcen in ngOnDestory, z. B. durch Abbestellen eines Streams, Löschen eines Timers usw.

Oben finden Sie eine ausführliche Erläuterung des Lebenszyklus von Angular-Komponenten (Teil 2). Weitere Informationen zu Angular finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!