隨記

Week 03 · Day 07 — 第三週總複習：元件基礎

學習目標

  • 回顧元件、四種綁定、父子通訊
  • 能獨立建立並串接元件
  • 完成並通過本週作業

重點速覽

  • 元件：@Component({selector, templateUrl, styleUrls}) + 類別（屬性/方法）
  • 建立：ng g c name 產生 4 個檔
  • 四種綁定：
  • {{ }} 插值、[prop] 屬性、(event) 事件、[(ngModel)] 雙向
  • 父子通訊：
  • 父→子：@Input() message + [message]="值"
  • 子→父：@Output() e = new EventEmitter() + (e)="handler($event)"

自我測驗

  1. 四種綁定語法分別是什麼？
  2. 子元件如何接收父元件傳來的資料？
  3. 子元件如何把資料送給父元件？
  4. [(ngModel)] 需要 import 哪個 Module？
答案 1. `{{ }}`、`[prop]`、`(event)`、`[(ngModel)]` 2. 宣告 `@Input()`，父用 `[property]` 傳 3. 宣告 `@Output()` + `EventEmitter.emit()` 4. `FormsModule`

作業

第三週作業（README） - [ ] 建立第一個元件 ✅ - [ ] 練習四種資料綁定（插值/屬性/事件/雙向） - [ ] 建立父子元件通訊（@Input + @Output）

實作檢核 - [ ] 建立可顯示文字並點擊變更的元件 - [ ] 建一條「父→子傳值、子→父回傳」的完整流程

總結

你已掌握 Angular 最核心的單元 —— 元件，以及它的資料傳遞方式。下一週學習如何用模組與路由組裝整個應用。