Angular 組件的生命週期及其各種方法解釋

Angular 於 2009 年由 Google 推出，是一個使用 Typescript 編程語言的 JavaScript 開發框架。 它是最流行的應用程序開發設計框架之一。 Angular 框架最好的部分是它是一個開源應用程序。 開發人員使用 Angular 框架來創建移動和 Web 應用程序並可視化數據。 對於 Angular 開發，開發人員必須遵循一個稱為 Angular 生命週期的廣泛過程。

本博客幫助您了解 Angular 生命週期及其各種鉤子方法。

什麼是 Angular 生命週期？

運行 Angular 組件所需的事件循環稱為 Angular 生命週期。 Angular 組件是 UI 所必需的應用程序的構建塊。 簡單來說，Angular 組件是負責控制 Angular 應用程序中屏幕的一塊塊。 這些組件包括各種屬性以及選擇器、模板和样式。 組件還需要元數據進行處理。

Angular 通過不同的變更檢測步驟來跟踪生命週期中數據綁定屬性的變化。 Angular 生命週期從 Angular 啟動組件類開始。 然後它定義組件的視圖和子組件的視圖。 最後，Angular 會銷毀不再使用的組件。 在實例化一個組件之後，它還會調用各種鉤子方法。

各種 Angular 組件生命週期鉤子作為 Angular 框架中的功能。 每個鉤子方法都允許開發人員在特定事件期間運行不同的代碼。

從世界頂級大學在線學習軟件開發課程。 獲得行政 PG 課程、高級證書課程或碩士課程，以加快您的職業生涯。

Angular 組件的生命週期

所有 Angular 組件都有不同的生命週期，分為八個不同的階段。 這些階段稱為生命週期鉤子事件，可以在應用時單獨使用。 在生命週期開始之前，我們執行組件類的構造函數，然後發生各種鉤子事件。 Angular 生命週期的鉤子事件主要分為兩大類。 一個階段與原始組件相關聯，而第二個階段與該特定組件的子組件相關。

讓我們了解 Angular 生命週期的各個階段：

• ngOnChanges：- ngOnChanges() 事件發生在我們更改組件內的輸入控件的值時，並且組件的綁定屬性發生更改。 簡單來說，每當 Angular 設置或重置組件的入站屬性時，都會發生此鉤子方法。 在此方法期間，將接收當前和先前屬性值的“SimpleCharge”對象。
  此鉤子方法接收當前和先前屬性值的更改數據映射。 數據映射包裝為 SimpleCharge。 需要記住的是，這個事件經常發生。 因此，在活動期間執行任何更改時必須非常小心，因為它會顯著影響性能。 僅當組件具有綁定輸入並且您更改組件的綁定屬性時，您才必須使用此鉤子方法。 因此，它通常被視為一種回調方法。
• ngOnInit:-此事件用於初始化組件中的數據。 一旦數據綁定屬性由 Angular 顯示並且輸入屬性由組件設置，ngOnInit() 就會初始化組件或指令。 ngOnInit() 的主要目的是執行複雜的初始化。 hook 方法首先使用組件將初始數據或局部變量獲取為簡單值。 一旦 Angular 設置了輸入屬性，它就會用於設置組件。 如果組件具有綁定屬性，則通常在 ngOnChanges 之後調用 ngOnInit() 事件。 但是，如果組件不包含任何綁定屬性，我們可以直接執行 ngOnInit() 事件。 您還必須記住，這個鉤子只被調用一次。
• ngDoCheck:-每次我們檢查輸入法的屬性時都會發生這個鉤子事件。 ngDoCheck 事件是每個更改檢測週期的組成部分，可以與您自己的邏輯檢查一起使用。 此事件有助於檢測組件中的自定義更改或算法。 ngDoCheck book 方法允許檢測 Angular 無法檢測到的那些更改。 您可以在每次更改檢測運行的 ngOnChanges 之後調用 ngDoCheck。 它可以在第一次運行 ngOnInit 之後觸發，即使沒有對組件的綁定屬性進行任何更改。
  
• ngAfterContentInit：-這個鉤子階段或生命週期方法類似於 ngOnInit，因為它在組件的生命週期中只發生一次。 當您必須第一次檢查組件的綁定時，您可以單次觸發此事件。 我們在 Angular 在組件內執行任何內容投影活動後執行此事件。 簡而言之，當 Angular 將外部內容投影到組件的視圖或存在指令的視圖中時，就會執行 ngAfterContentInit。 ngAfterContentInit 在執行 ngDoCheck 方法後立即被 Angular 調用。 此生命週期方法與子組件的初始化有關。
  
• ngAfterContentChecked:-這個鉤子階段是 ngDoCheck 方法的後續操作。 顧名思義，ngAfterContentChecked 方法是在 Angular 檢測到投射到組件內的外部內容髮生變化後執行的。 此事件在每個更改檢測週期後發生。 它在 ngAfterContentInit() 和每個後續的 ngDoCheck() 之後調用。 與 ngAfterContentInit 一樣，ngAfterContentChecked 也與子組件初始化相關聯。
  
• ngAfterViewInit:- ngAfterViewInit 在組件視圖初始化完成後觸發。 它只在 ngAfterContentChecked() 生命週期方法之後調用一次。 此鉤子方法僅用於組件而不是子組件。
  

  軟件工程的熱門課程和文章

  熱門節目
  軟件開發執行 PG 計劃 - IIIT B	區塊鏈證書課程 - PURDUE	網絡安全證書計劃 - PURDUE	計算機科學理學碩士 - IIIT B
  其他熱門文章
  2021-22年美國雲工程師薪水	美國 AWS 解決方案架構師薪水	美國後端開發人員工資	美國前端開發人員薪水
  美國網絡開發人員的薪水	2022 年 Scrum Master 面試問題	如何在 2022 年開始網絡安全職業？	工程專業學生在美國的職業選擇

• ngAfterViewChecked:-一旦 Angular 完成組件或子組件的檢測或檢查視圖，就會調用此生命週期。 即使在 ngAfterViewInit 方法之後調用 ngAfterViewChecked 方法，它也會在每個後續 ngAfterContentChecked() 生命週期階段之後執行。 這個鉤子方法只與角度組件有關。
  
• ngOnDestroy:- ngOnDestroy() 鉤子方法在 Angular 銷毀不再需要的組件之前執行。 此生命週期方法分離事件並有助於避免任何內存洩漏。 它還取消訂閱 observables。 在移除組件之前，我們只調用一次此事件。 這個鉤子方法用作 Angular 銷毀組件之前的清理。

Angular 生命週期中的接口

Angular 生命週期通常是通過組件類定義的。 但是，接口也可以用於定義 Angular 組件類，因為各種鉤子方法已經具有關聯的 Typescript 接口。 我們通常將接口理解為有助於識別各種方法和相關屬性的特徵。 即使沒有必要，強烈建議在 Angular 生命週期中實現接口。 每個接口的目的是為鉤子方法定義原型。 接口以前綴“ng”命名。

結論

Angular 組件基於 typescript 編程。 因此，在實現 Angular 生命週期鉤子方法之前，有必要了解 typescript 編程的基礎知識。 學習 Angular 應用程序設計的基礎知識、生命週期方法的過程以及要使用哪些鉤子方法的知識也很重要。

如果您打算從事 Angular 應用程序開發的職業，您必須對整個過程以及不同鉤子方法的功能有深入的了解。 此外，由於 Angular 是一個 javascript 開發框架，因此您必須學習 Java 編程語言。 upGrad 的軟件開發執行 PG 計劃是從頭開始學習 Angular 應用程序開發的絕佳選擇。