Angular ngAfterViewInit-Methode

Wir werden die Methode ngAfterViewInit() vorstellen und in Angular-Anwendungen verwenden.

die Methode ngAfterViewInit() in Angular

Das ngAfterViewInit() in Angular ist eine Methode von AfterViewInit, und Angular initialisiert vollständig einen Lebenszyklus-Hook, der nach der Ansicht der Komponente aufgerufen wird.

Wir können ngAfterViewInit() verwenden, um alle Initialisierungsaufgaben zu handhaben und auszuführen, die in der Komponente erforderlich sind, oder wir tun möchten, nachdem die Ansicht der Komponente vollständig initialisiert wurde.

Wir können auf die mit ngAfterViewInit() annotierten Eigenschaften mit zwei Dekoratoren zugreifen, den Dekoratoren @ViewChild() und @ViewChildren().

Wir werden ein Beispiel durchgehen, um zu verstehen, wie ngAfterViewInit() funktioniert und wie wir es in unseren Angular-Anwendungen verwenden können.

Lassen Sie uns eine neue Anwendung erstellen, indem Sie den folgenden Befehl verwenden.

# angular
ng new my-app

Nachdem wir unsere neue Anwendung in Angular erstellt haben, gehen wir mit diesem Befehl zu unserem Anwendungsverzeichnis.

# angular
cd my-app

Lassen Sie uns nun unsere App ausführen, um zu überprüfen, ob alle Abhängigkeiten korrekt installiert sind.

# angular
ng serve --open

In unserer app.component.ts erstellen wir eine Methode ngAfterViewInit(), um unsere Nachricht console.log. Unser Code sieht also wie folgt aus.

# angular
import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  ngAfterViewInit() {
    console.log("Sent from Ng After View Init");
  }
}

Ausgabe:

Auf diese Weise können wir mit ngAfterViewInit() alle wichtigen Dinge initialisieren, nachdem die Ansicht der Komponente von Angular initialisiert wurde.