隨記

Week 03 · Day 06 — 父子元件通訊：@Output 與 EventEmitter

學習目標

  • 用 @Output() + EventEmitter 讓子→父回傳資料
  • 在父元件以 (event)="handler($event)" 接收
  • 實作完整的雙向溝通

重點

@Output：子傳回給父 - 子元件宣告 @Output() onMessageChange = new EventEmitter<string>() - 呼叫 .emit(資料) 把資料送出 - 父元件用 (事件名)="方法($event)" 接收 

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

@Component({
  selector: 'app-child',
  template: `
    <p>{{ message }}</p>
    <button (click)="sendMessage()">Send to Parent</button>
  `
})
export class ChildComponent {
  @Input() message: string = "";
  @Output() onMessageChange = new EventEmitter<string>();

  sendMessage(): void {
    this.onMessageChange.emit("Hello from child!");
  }
}

父元件接收 

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

  handleMessageChange(newMessage: string): void {
    this.parentMessage = newMessage;
  }
}

資料流 - [message] → 父傳子（Input） - (onMessageChange) → 子傳父（Output） - $event = emit() 傳出的值

實作

  1. 修改 Day05 的父子元件，加入 @Output()
  2. 點擊子元件按鈕，送出 "Hello from child!"
  3. 父元件顯示更新後的值

作業

  • 子元件用 @Output() + EventEmitter.emit() 送出資料
  • 父元件用 (event)="handler($event)" 接收
  • 完整跑一遍「點子元件按鈕 → 父元件文字變更」流程