Detaillierte Erklärung des Lebenszyklus einer Angular-Komponente (I)

Überblick

Komponentendeklarationszyklus und Änderungserkennungsmechanismus von Angular

Die rote Methode wird nur einmal ausgeführt.

Die während der Änderungserkennung ausgeführte grüne Methode ist dieselbe wie die während der Komponenteninitialisierung ausgeführte grüne Methode.

Insgesamt gibt es 9 Methoden.

Jeder Hook ist eine in der @angular/core-Bibliothek definierte Schnittstelle.

importiere { Komponente, OnInit } von '@angular/core';

@Komponente({
  Selektor: ‚App-Leben‘,
  Vorlagen-URL: "./life.component.html",
  styleUrls: ['./life.component.css']
})
export Klasse LifeComponent implementiert OnInit {

  Konstruktor() { }

  ngOnInit() {
  }

}

Obwohl die Schnittstelle nicht erforderlich ist, führt Angular sie aus, wenn es die Hook-Methode erkennt. Daher wird empfohlen, die Schnittstelle zu schreiben.

1. Hook-Aufrufreihenfolge

importiere { Komponente, BeiInit, BeiÄnderungen, DoCheck, AfterContentInit, AfterContentChecked, AfterViewInit, AfterViewChecked, BeiDestroy, Eingabe, SimpleChange, SimpleChanges } von '@angular/core';

let logIndex: Zahl = 1; //Zähler@Komponente({
  Selektor: ‚App-Leben‘,
  Vorlagen-URL: "./life.component.html",
  styleUrls: ['./life.component.css']
})
Exportklasse LifeComponent implementiert OnInit, OnChanges, DoCheck, AfterContentInit
  , AfterContentChecked, AfterViewInit, AfterViewChecked, OnDestroy {
  @Eingang()
  Name: Zeichenfolge;

  logIt(msg: Zeichenfolge) {
    Konsole.log(`# ${logIndex++} ${msg}`);
  }
  Konstruktor() {
    this.logIt("Der Wert der Name-Eigenschaft im Konstruktor ist: " + this.name);
  }

  ngOnInit() {
    this.logIt("Der Wert der Eigenschaft name in OnInit ist: " + this.name);
  }

  ngOnChanges(changes: SimpleChanges): void { // Übergeben Sie ein SimpleChanges-Objekt let name = changes['name'].currentValue;
    this.logIt("Der Wert des Namensattributs in ngOnChanges ist: " + this.name);
  }

  ngDoCheck(): void {
    this.logIt("DoCheck");
  }

  ngAfterContentInit() {
    this.logIt("ngAfterContentInit");
  }

  ngAfterContentChecked() {
    this.logIt("ngAfterContentChecked");
  }

  ngAfterViewInit() {
    this.logIt("ngAfterViewInit");
  }

  ngAfterViewChecked() {
    this.logIt("ngAfterViewChecked");
  }
  ngOnDestroy() {
    this.logIt("ngOnDestory");
  }
} 

Wenn die Initialisierungslogik vom Wert einer Eingabeeigenschaft abhängt, muss die Initialisierungslogik in ngOnInit und nicht im Konstruktor geschrieben werden.

DoCheck wird während jedes Änderungserkennungszyklus in Angular aufgerufen.

ngAfterContentInit und ngAfterContentChecked beziehen sich auf Vorlagen und Komponenteninhaltsprojektion.

ngAfterViewInit und ngAfterViewChecked beziehen sich auf die Komponentenvorlage und die Initialisierungsansicht.

2. onChanges-Hook

Die übergeordnete Komponente wird aufgerufen, wenn sie die Eingabeparameter der untergeordneten Komponente initialisiert oder ändert.

Sie müssen zunächst veränderbare und unveränderliche Objekte in JS verstehen.

//Strings sind unveränderlich var greeting = "Hallo";
Begrüßung = "Hallo Welt";
//Objekte sind veränderbar var user = { name: "Tom" };
Benutzername = "Jerry";

Beispiel:

Die untergeordnete Komponente hat 3 Eigenschaften, von denen 2 Eingabeeigenschaften sind.

Die übergeordnete Komponente verfügt über eine Begrüßungseigenschaft und eine Namenseigenschaft, die Toms Benutzerobjekt ist.

Die übergeordnete Komponente möchte die Eingabeeigenschaft ändern, daher sind „Greeting“ und „Benutzername“ bidirektional gebunden.

<div Klasse="übergeordnet">
    <h2>Ich bin die übergeordnete Komponente</h2>
    <div>Begrüßung: <input type="text" [(ngModel)]="greeting"></div>
    <div>
      Name:
      <input type="text" [(ngModel)]="benutzer.name">
    </div>
    <app-child [greeting]="gruß" [(user)]="user"> </app-child>
</div>

Wenn die übergeordnete Komponente die Werte der beiden Eingaben ändert, ändern sich auch die an die untergeordnete Komponente übergebenen Werte. Wenn sich die Werte der an die untergeordnete Komponente übergebenen Eingabeeigenschaften ändern, wird ngOnChanges () ausgelöst.

Die übergeordnete Komponente initialisiert die untergeordnete Komponente. Rufen Sie ngOnChanges() einmal während der Initialisierung auf. Nach der Initialisierung wird die Begrüßung der untergeordneten Komponente zu Hello, was dem Wert der Begrüßung der übergeordneten Komponente entspricht.

Der Benutzer wird zu einem Objekt mit dem Namensattribut Tom.

Ändern Sie den Wert des Eingabeattributs und ändern Sie die Begrüßung der übergeordneten Komponente in „Halloa“.

Die Änderungserkennung von Angular aktualisiert das unveränderliche Objekt, d. h. den Wert der Begrüßung, und ruft dann die Methode ngOnChanges() auf. Der Wert der Begrüßung ändert sich vom vorherigen Hallo zu Helloa.

Ändern Sie den Benutzernamen in Tomb, und es werden keine neuen Nachrichten auf der Konsole ausgegeben.

Da der Benutzer nur die Eigenschaften des veränderbaren Objektbenutzers geändert hat, hat sich der Verweis auf das Benutzerobjekt selbst nicht geändert und daher wurde die Methode onChanges() nicht aufgerufen.

Obwohl die Eigenschaftsänderungen des veränderbaren Objekts den Methodenaufruf ngOnChanges() nicht auslösen, werden die Eigenschaften des Benutzerobjekts der untergeordneten Komponente dennoch geändert, da der Änderungserkennungsmechanismus von Angular weiterhin die Eigenschaftsänderungen jedes Objekts in der Komponente erfasst.

Das Ändern der Nachrichteneigenschaft einer untergeordneten Komponente führt nicht dazu, dass die Methode onChanges() der untergeordneten Komponente aufgerufen wird. Weil die Nachricht kein Eingabeattribut ist. ngOnChanges() wird nur aufgerufen, wenn sich die Eingabeeigenschaft ändert.

3. Änderungserkennungsmechanismus und DoCheck()-Hook

Die Änderungserkennung wird durch zone.js implementiert. Stellen Sie sicher, dass Änderungen der Komponenteneigenschaften mit Seitenänderungen synchronisiert werden. Asynchrone Ereignisse, die im Browser auftreten (Klicken auf eine Schaltfläche, Eingeben von Daten, vom Server zurückkommende Daten, Aufrufen der Methode setTimeout()), lösen die Änderungserkennung aus.

Wenn die Änderungserkennung ausgeführt wird, werden alle Bindungsbeziehungen an der Komponentenvorlage erkannt. Wenn die Komponenteneigenschaften geändert werden, muss möglicherweise der entsprechende Bereich der daran gebundenen Vorlage aktualisiert werden.

Hinweis: Der Änderungserkennungsmechanismus spiegelt nur Änderungen an Komponenteneigenschaften in der Vorlage wider. Der Änderungserkennungsmechanismus selbst ändert niemals den Wert der Komponenteneigenschaften.

Zwei Strategien zur Änderungserkennung.

• Standardmäßig werden Änderungen erkannt, indem der gesamte Komponentenbaum überprüft wird.
• OnPush erkennt die Komponente und ihre Unterkomponenten nur, wenn sich die Eingabeeigenschaften ändern.

Eine Angular-Anwendung ist ein Komponentenbaum mit der Hauptkomponente als Stamm. Jede Komponente generiert einen Änderungsdetektor. Wenn ein Änderungsdetektor eine Änderung erkennt, überprüft zone.js die Komponente basierend auf der Änderungsprüfstrategie der Komponente (d. h. ruft den doCheck()-Hook auf), um festzustellen, ob die Komponente ihre Vorlage aktualisieren muss.

DoCheck prüft alle Komponentenbäume beginnend bei der Stammkomponente, unabhängig davon, in welcher Komponente die Änderung auftritt.

Beispiel:

Überwachen Sie Änderungen an Attributen veränderlicher Objekte wie Benutzername.

Fügen Sie in „child“ einen „oldUsername“ hinzu, um den Benutzernamen vor der Änderung zu speichern, und fügen Sie ein „changeDetected“-Attribut hinzu, um zu kennzeichnen, ob sich der Benutzername geändert hat. Der Standardwert ist „false“. Der Zähler „noChangeCount“ ist standardmäßig auf 0 eingestellt.

importiere { Komponente, BeiInit, Eingabe, BeiÄnderungen, SimpleChanges, DoCheck } von '@angular/core';

@Komponente({
  Selektor: ‚App-Kind‘,
  Vorlagen-URL: "./child.component.html",
  styleUrls: ['./child.component.css']
})
export Klasse ChildComponent implementiert OnInit, OnChanges, DoCheck {

  @Eingang()
  Begrüßung: Zeichenfolge;

  @Eingang()
  Benutzer: { Name: Zeichenfolge };

  Nachricht: Zeichenfolge = „Initialisierungsnachricht“;
  alterBenutzername: Zeichenfolge;
  Änderung erkannt: Boolesch = falsch;
  noChangeCount: Zahl = 0;

  Konstruktor() { }

  ngOnInit() {
  }

  ngOnChanges(Änderungen: SimpleChanges): void {
    console.log(JSON.stringify(Änderungen, null, 2));
  }

  ngDoCheck() {
    if (dieser.Benutzername !== dieser.alteBenutzername) {
      dies.changeDetected = wahr;
      console.log("DoCheck: Benutzername ändert sich von " + dieser.alteBenutzername + " zu " + dieser.Benutzername);
      dieser.alteBenutzername = dieser.Benutzername;
    }
    if (this.changeDetected) {//Änderungszähler auf 0 gelöscht
      Dies.noChangeCount = 0;
    } sonst {//Keine Änderung this.noChangeCount++;
      console.log("DoCheck: Die Methode ngDoCheck wurde aufgerufen, als sich user.name nicht geändert hat" + this.noChangeCount + "times")
    }
    this.changeDetected = false; //Zum Schluss wird das Flag zurückgesetzt, unabhängig davon, ob es sich geändert hat oder nicht}

} 

Das Laden der Seite ist abgeschlossen: Die DoCheck-Methode wurde einmal aufgerufen, als sich der Benutzername nicht geändert hat.

Mausklicks ändern keine Werte. Durch Klicken wird der Änderungserkennungsmechanismus ausgelöst und DoCheck aller Komponenten wird aufgerufen.

Ändern Sie Tom in Tomb, und DoCheck erkennt, dass sich Tom in Tomb geändert hat.

Obwohl der DoCheck()-Hook Änderungen des Benutzernamens erkennen kann, muss er mit Vorsicht verwendet werden, da der ngDoCheck()-Hook sehr häufig aufgerufen wird. Dies wird nach jedem Änderungserkennungszyklus aufgerufen, wenn Änderungen auftreten.

Die Implementierung von ngDoCheck() muss sehr effizient und leichtgewichtig sein, da es sonst leicht zu Leistungsproblemen kommen kann.

Ebenso gilt: Alle Hook-Methoden mit dem Schlüsselwort Check müssen mit großer Vorsicht verwendet werden. ngDoCheck, ngAfterContentChecked, ngAfterViewChecked.

Oben finden Sie eine ausführliche Erläuterung des Lebenszyklus einer Angular-Komponente (Teil 1). Weitere Informationen zum Lebenszyklus einer Angular-Komponente finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!