Eine kurze Diskussion über den Lebenszyklus von Komponenten in Angular

Dieser Artikel stellt Ihnen den Lebenszyklus von Komponenten (Component Lifecycle Hook) in Angular vor. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Umgebung:

• Angular CLI: 11.0.6

• Angular: 11.0.7

• Knoten: 12.18.3

• npm: 6.14.6

• IDE : Visual Studio Code

1. Zusammenfassung

Der Lebenszyklus einer Komponenteninstanz beginnt, wenn Angular eine 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. [Verwandte Tutorial-Empfehlung: „Angular-Tutorial“]

Ihre Anwendung kann die Lebenszyklus-Hook-Methode verwenden, um wichtige Ereignisse im Komponenten- oder Befehlslebenszyklus auszulösen, um neue Instanzen zu initialisieren und bei Bedarf die Änderungserkennung zu starten um auf Aktualisierungen zu reagieren und aufzuräumen, bevor die Instanz gelöscht wird.

2. Lebenszyklus und Sequenz

• ngOnChanges(): Reagiert, wenn Angular die Eingabeeigenschaft der Datenbindung setzt oder zurücksetzt.

• ngOnInit(): Initialisiert eine Direktive/Komponente, nachdem Angular zum ersten Mal die Datenbindung anzeigt und die Eingabeeigenschaften der Direktive/Komponente festlegt.

• ngDoCheck(): Wird jedes Mal nach ngOnChanges() aufgerufen, wenn eine Änderungserkennung durchgeführt wird, und nach ngOnInit(), wenn eine Änderungserkennung zum ersten Mal durchgeführt wird.

• ngAfterContentInit(): Wird aufgerufen, nachdem Angular externen Inhalt in die Komponentenansicht oder die Ansicht projiziert, in der sich die Direktive befindet.

• ngAfterContentChecked(): Wird nach ngAfterContentInit() und jedem ngDoCheck() aufgerufen.

• ngAfterViewInit(): Wird aufgerufen, nachdem Angular die Komponentenansicht und ihre Unteransichten oder die Ansicht, die diese Direktive enthält, initialisiert hat.

• ngAfterViewChecked(): Wird nach ngAfterViewInit() und jedem ngAfterContentChecked() aufgerufen.

• ngOnDestroy(): Wird jedes Mal aufgerufen, bevor Angular eine Direktive/Komponente zerstört, um Ressourcen zu bereinigen und freizugeben.

3. Reagieren Sie auf Lebenszyklusereignisse

Wir reagieren auf Ereignisse im Komponenten- oder Direktivenlebenszyklus, indem wir eine oder mehrere in Angular definierte Lebenszyklus-Hook-Schnittstellen implementieren. Jede Schnittstelle verfügt über eine eindeutige Hook-Methode und ihre Namen bestehen aus dem Schnittstellennamen und dem Präfix ng. Zum Beispiel:

@Component()
export class DemoComponent implements OnInit {
  constructor() { }

  // implement OnInit's `ngOnInit` method
  ngOnInit() { 
      // do something here
  }
}

Anweisungen:

1) Um auf Ereignisse im Lebenszyklus über die Lebenszyklus-Hook-Schnittstelle zu reagieren, müssen Sie die Implementierung (Implementierungen) der spezifischen Hook-Schnittstelle nach dem Klassennamen deklarieren. Definieren Sie dann eine Hook-Funktion im auszuführenden Code. Beispielsweise entspricht ngOnInit() der Schnittstelle OnInit. ngOnInit() 对应 接口OnInit 。

2） 可以实现多个钩子接口，例如 export class DemoComponent implements OnInit, OnDestroy {<!-- -->

4. 主要生命周期事件

4.1. 初始化事件 ngOnInit()

使用 ngOnInit() 方法执行以下初始化任务：

• 逻辑稍复杂，不适合放到构造函数中的逻辑

• 初始化中的数据访问逻辑

• 处理需要根据父组件传入参数（@Input）进行初始化的逻辑

4.2. 实例销毁 ngOnDestroy()

把清理逻辑放进 ngOnDestroy() 中，这个逻辑就必然会在 Angular 销毁该指令之前运行。下列逻辑可言放到ngOnDestroy()：

• 取消订阅可观察对象和 DOM 事件。

• 停止 interval 计时器。

• 反注册该指令在全局或应用服务中注册过的所有回调。

• 释放其他占有的资源。

5. 总结

• 使用生命周期事件钩子函数，别忘了类名后面implements

  2) Es können mehrere Hook-Schnittstellen implementiert werden, z. B. export class DemoComponent implementiert OnInit, OnDestroy {<!-- -->

• 4. Hauptlebenszyklusereignisse

• 4.1. Initialisierungsereignis ngOnInit()

• Verwenden Sie die ngOnInit()-Methode, um die folgenden Initialisierungsaufgaben auszuführen:

Die Logik ist etwas kompliziert und ist nicht für die Platzierung im Konstruktor geeignet. Die Logik

🎜 Die Datenzugriffslogik bei der Initialisierung 🎜🎜🎜🎜 verarbeitet die Logik, die gemäß den eingehenden Parametern der übergeordneten Komponente (@Input) initialisiert werden muss 🎜🎜🎜🎜🎜 4.2. Instanzzerstörung ngOnDestroy()🎜🎜🎜Fügen Sie die Bereinigungslogik in ngOnDestroy() ein, und diese Logik wird zwangsläufig ausgeführt, bevor Angular die Anweisung zerstört. Die folgende Logik kann in ngOnDestroy() eingefügt werden: 🎜🎜🎜🎜Unsubscribe von Observables und DOM-Ereignissen. 🎜🎜🎜🎜Intervall-Timer stoppen. 🎜🎜🎜🎜Deregistrieren Sie alle von diesem Befehl registrierten Rückrufe global oder in Anwendungsdiensten. 🎜🎜🎜🎜Andere belegte Ressourcen freigeben. 🎜🎜🎜🎜🎜5. Zusammenfassung🎜🎜🎜🎜🎜Verwenden Sie die Hook-Funktion für Lebenszyklusereignisse. Vergessen Sie nicht die entsprechende Schnittstelle implements, da sie sonst nicht wirksam wird 🎜🎜Initialisierungscode, unterscheiden Sie, welche in Konstruktoren und welche in ngOnInit() platziert werden sollen; 🎜🎜🎜🎜 Sie können optimierte Hook-Ereignismethoden verwenden, um Leistungsprobleme zu vermeiden; 🎜🎜🎜🎜ngOnChanges() tritt sehr häufig auf , und das Hinzufügen komplexer Logik wirkt sich auf die Leistung aus. 🎜🎜🎜🎜Weitere Informationen zum Programmieren finden Sie unter: 🎜Einführung in die Programmierung🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonEine kurze Diskussion über den Lebenszyklus von Komponenten in Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!