關於 Angular中的 constructor 與 ngOnInit

Angular中的 constructor 與 ngOnInit 在本篇筆記中來紀錄一下 Angular中的 constructor 與 ngOnInit 有何不同的使用情境,也探討一下 ngOnInit() 的非必要性。 ngOnInit 與 constructor ngOnInit() 與 Class 中的其他 Method 無異,僅因為它剛好被命名為 ngOnInit,常會被與 constructor 搞混用途。其實它並非是必要的,完全取決於你。當 Angular 編譯器進行程式編譯時會將是否 Class 中有實現 ngOnInit() 的方法記錄在特定的 Flag 中,這個 Flag 會在 “變更檢測"時決定是不是要呼叫 ngOnInit() 這個方法。 而 constructor 則完全是另外的一件事,不管你有沒有在類別中實現它,在建立類別實例時它都會被呼叫到。 Angular啟動時的二個主要階段: 建構元件樹(component tree) 執行變更檢測(change detection) constructor 是在第一個階段被呼叫的,這就是為什麼我們不能將任何依賴於 DOM、元素、輸入數據、綁定等的初始化邏輯放在constructor— 因為它們尚不可使用。 而 ngOnInit 則在第二階段,實際上所有的生命週期鉤子都是“變更檢測”階段的一部份。 當 Angular 開始變更檢測時,組件樹已被構建,樹中所有組件的構造函數都被調用。它已經完成了組件 DOM 的創建,通過構造函數注入了所有必需的依賴項並處理了輸入綁定。每個組件的模板節點都被添加到 DOM 中。 也可以取得初始化組件可能需要的所有資料,如:DI Provider、DOM 和輸入綁定(input bindings)。 在實際的使用案例上 constructor 最常被使用的是用來“注入依賴項目”(當然不僅限於此) ngOnInit 是否為必須 在之前使用 angular cli(如:14....

January 2, 2023 · 4 min · Theme PaperMod