隨記

Week 03 · Day 05 — 父子元件通訊：@Input

學習目標

  • 用 @Input() 讓父→子傳資料
  • 在父元件以 [屬性]="值" 傳入
  • 理解資料流方向

重點

@Input：父傳給子 - 子元件宣告 @Input() message: string - 父元件使用子元件時以 [message]="父的資料" 傳入 

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `<p>{{ message }}</p>`
})
export class ChildComponent {
  @Input() message: string = "";
}

父元件傳值 

@Component({
  selector: 'app-parent',
  template: `
    <app-child [message]="parentMessage"></app-child>
  `
})
export class ParentComponent {
  parentMessage = "Hello from parent";
}

重點觀念 - [message] = 屬性綁定，方向：父 → 子 - @Input() 是子元件聲明「我可以接收外部傳來的資料」 - 資料往下流（top-down）

實作

  1. 建立 child 元件，含 @Input() message
  2. 建立 parent 元件，模板用 <app-child [message]="...">
  3. 在根元件使用 <app-parent>
  4. 修改 parentMessage，子元件畫面連動

作業

  • 子元件宣告 @Input() 屬性
  • 父元件用 [property] 傳值給子元件
  • 說明 @Input() 的資料流方向