此為六角線上直播「大神來六角」所用的投影片講義

1. Angular 從入⾨到實戰 - 核⼼八元素（下）

2. • 「Angular 深入淺出三⼗天」
• 「Angular Schematics 實戰三⼗天」
• Perkd Taiwan
陳志龍（Leo 李歐）

3. • Directive
• Service & Dependency injection
• Life Cycle Hooks
• Q&A
⼤綱

4. Directive

5. Directive
• 指令
• 結構型（structural）指令
新增、刪除或是取代 DOM 中的元素

6. Directive
• 指令
• 結構型（structural）指令
• 屬性型（attribute）指令
改變元素的外觀和⾏為

7. Directive

8. Directive
Directive
Directive
[myDir]
MyDirective

9. Service & Dependency injection

10. Service & Dependency injection
• 服務
• 廣義來說，什麼都可以是Service
• 狹義來說，有著專⾨⽤途的 Class

11. • DI
• 好像很厲害的⼀種設計模式
Service & Dependency injection

12. Service & Dependency injection
注入器（injector）
Hero ServiceService A Service DService C

13. Service & Dependency injection

14. Service & Dependency injection

15. Service & Dependency injection

16. Life Cycle Hooks

17. Life Cycle Hooks
• ⽣命週期（鉤⼦）
• 線上範例
• 官⽅⽂件

18. Life Cycle Hooks
Hook Method 說明
ngOnChanges
當元件的任意 @Input() 屬性被設定後執⾏
此⽅法會得到變更物件的⽬前值與先前的值
ngOnInit 當 Angular 已經初始化過所有 @Input() 屬性後執⾏
ngDoCheck 當 Angular 每次執⾏變更偵測時執⾏ (會影響效能)
ngOnDestroy
當 Angular 要摧毀元件時執⾏
建議在此處取消訂閱觀察者物件或刪除先前註冊過
的事件處裡器，以避免記憶體洩漏問題發⽣!

19. Q&A

20. 相關連結
Angular Taiwan 臉書社團 Angular Taiwan 論壇
Angular Taiwan 線上讀書會社團 Angular Taiwan Youtube 頻道

21. 感謝收看