隨記

Week 07 · Day 07 — 第七週總複習：元件進階

學習目標

  • 回顧生命週期、內容投影、ViewChild、動態元件
  • 能建立高重用、可動態管理的元件
  • 完成並通過本週作業

重點速覽

  • 生命週期：OnInit（初始化）/ OnDestroy（清理）/ OnChanges（@Input 變化）/ AfterViewInit
  • 內容投影：<ng-content> 建立容器型元件（可 select 分槽）
  • ViewChild：#ref + @ViewChild 取得 DOM ElementRef 或子元件
  • 動態元件：*ngComponentOutlet（聲明式）與 ViewContainerRef.createComponent（程式化）
  • 資源管理：動態實例用 componentRef.destroy() 清理

自我測驗

  1. 初始化資料最好放哪個鉤子？清理放哪個？
  2. <ng-content> 的用途？
  3. @ViewChild('x', { read: ViewContainerRef }) 的 read 是什麼？
  4. 動態建立的元件如何銷毀？
答案 1. `ngOnInit`；`ngOnDestroy` 2. 接收父元件投影進來的內容 3. 指定從參考變數讀取的類型（ViewContainerRef 而非 ElementRef） 4. `componentRef.destroy()`

作業

第七週作業（README） - [ ] 練習生命週期鉤子 ✅ - [ ] 建立可重用的 Card 元件 ✅ - [ ] 實作動態元件載入 ✅

實作檢核 - [ ] Card 可用 <ng-content> 放任意內容 - [ ] 動態元件能建立並設定 instance，且能清理 - [ ] 元件銷毀時無訂閱/實例殘留（記憶體安全）

總結

你已掌握元件架構的先進技巧。下一週把資料集中管理——狀態管理。