GSS 技術部落格
在這個園地裡我們將從技術、專案管理、客戶對談面和大家分享我們多年的經驗，希望大家不管是喜歡或是有意見，都可以回饋給我們，讓我們有機會和大家對話並一起成長！
若有任何問題請來信：gss_crm@gss.com.tw
- 從深入淺出系列可以了解到 Angular App 最重要的就是 Component 了
- 接下來的幾篇將深入探討 Component
- 當 Angular CLI 在收到 ng generate component 指令後，會建立一系列相關的檔案及設定，其中一定要存在的東西有:
- @Component
- 各位還記得的話，是個 Decorator
- 這個 Decorator 一定要掛在 class 上，Angular 才會當作 Component 處理
- Controller
- 被 @Component 所裝飾的 class 就是 controller
- 所有的成員變數及方法都定義在這個地方
- 承上，邏輯主要也是寫在這
- Template
- 如果沒有 template 還算是 component 嗎？
- Template 中所定義的內容跟切版就會是使用者看到的 UI
- 在解析 Template 的時候會一併把事件跟資料綁定
- @Component
- 非必要的部份有:
- Providers:
- 可以針對 component 設定特有的 service
- 在 component 內可以使用的 service 除了在 root module 中定義之外，就是這個部份會補足的，某種意義上也算是種封裝
- 什麼時候要用哪一種 provider 有更詳細的區分方法，可以參考此連結，有非常詳細的說明各層級 providers 的使用時機及其影響
- Input:
- 如同前面的篇章所介紹的，component 可以透過定義 @Input() 裝飾的屬性，從父 Component 取得資料
- 承上，反過來說就是父 Component 可以傳資料給子 Component，是一種由上往下傳遞資訊的方式
- Styles:
- Component 專屬的 CSS
- 底層的運作機制是透過 shadow DOM 達成的，因此在裡面定義的 CSS 不會在 global 層級看到，可以避免被 global CSS 干擾
- Animations
- Angular 有內建處理動畫的 Module
- 這部份應該，不會在每日系列講解，有急需的人可以至官網連結看
- Outputs
- 前面有提到 component 前上對下的資料傳輸方式是透過 @Input()，而下對上的傳輸方式就是 @Output() 了，但不限於下對上，有興趣的 Component 都可以監聽並處理
- 承上，通常會搭配 Angular 中事件處理的機制，後面會再詳述
- Lifecycle hooks
- 每個 component 都有生命週期，而其中有幾個階段是可以搭配 hooks 處理一些事前事中事後的事務
- 比方說前面有看過的 OnInit，它是個介面，會強制 controller 要實作 ngOnInit，會在所有資料都綁定完成後執行，以此類推，後序再作詳細的說明
- 其他
- Component 的可選項目太…多…了，剩下的可以上官網看連結
- Providers:
- 當 Angular CLI 在收到 ng generate component 指令後，會建立一系列相關的檔案及設定，其中一定要存在的東西有:
- 接下來的幾篇將深入探討 Component
- Component 的生命週期
- Component 從建立到削毀會經過幾個重要的生命週期
- 第一是被註冊到 App Module
- 這通常是因為我們有將這個 Component 列在 NgModule 的 Metadata 中
- 然而 Component 也可以在 App 已經開始執行時動態註冊
- 不論如何，只要註冊了，就會產生一個 Factory 待機
- 第二是 Component 被需要了
- 這通常是發生在 Template 中有這個 component 的 selector，但也可以手動要求一個 Component
- 這時候 Angular 就會去 Module 所屬的 Registry 找到該 component 的 Factory(這個 Factory 是在 CLI 編譯時期建立的)
- 第三是 Component 被初始化了
- 初始化的時候會讀這個 component 的 metadata，並執行 constructor()
- 這邊切記不要放任何跟子 component 相關的邏輯，因為當下子 component 也許根本尚未存在
- 第四是 Component 開始渲染 Template 中有用到的子 Component
- 這一段是發生在 Component 的 Metadata 中 Template 開始被解析時
- 子 Component 也會走同樣的流程開始初始化，且同時現在的這個 Component 會繼續完成它的初始化，兩者是非同步的
- 第五是 Component 與其子 Component 都初始化完成
- 此時各種生命週期相關的 hook 都有機會被觸發
- 觸發的原因可能是 User 做了操作，事件發生，狀態變化...等
- 最後，終有那麼一段時間，Component 不再被用到了，就會被移除
- 移除的內容包含其子 Component
- 如果這個 Component 又被需要了，那就會再走一次同樣的生命週期
- 第一是被註冊到 App Module
- Component 從建立到削毀會經過幾個重要的生命週期
- Lifecycle Hooks
- Component 生命週期中會被觸發的方法，但跟事件監聽不一樣，只有你實作某個 hook 的介面它才會作用，否則什麼事都不會發生
- 常見的 Lifecycle hook 如下:
- OnChanges
- 發生在 @Input() 綁定的屬性發生異動時
- 會有一個 SimpleChange 物件可以知道異動前後的值
- OnInit
- 發生在所有的綁定都處理完時
- 初始化資料的最佳時機
- OnDestroy
- 發生在 component 被移除前
- 停止監聽某事件或是停止 timer的 的最佳時機
- DoCheck
- 發生在 Change Detection 執行時
- AfterContentInit
- 發生在所有的 Content Children 完成初始化時
- 可以在這個時候針對子 Component 作一些設定
- AfterContentChecked
- 發生在 Angular 檢查 content children 時
- AfterViewInit
- 發生在所有的 View Children 完成初始化時
- 這時整個元件樹都已初步設定完成
- AfterViewChecked
- 發生在 View Children 被 Angular 檢查時
- 其他 ...
- 完整的清單還是看官網吧
- OnChanges
- 小結
- 先別休克，後面還有
- 了解這些的目的是為了設計出更好的 Component
- 內容相當深奧，但等後面開始實作的時候就會愈來愈明白的
- 先別休克，後面還有
相關文章
評論
尚無評論