@Outpu()、output()

@Output() 裝飾器用於實現子組件向父組件的事件傳遞機制。

基本實現方式為定義一個 @Output 事件屬性，並實例化 EventEmitter 類。

執行事件發送時，透過 this.事件名稱.emit() 方法觸發事件，可於方法中傳入需發送的數據。

實作範例

子組件事件定義

@Output() select = new EventEmitter();

onSelectUser() {
  this.select.emit(this.id);  // 發送事件並傳遞數據
}

父組件事件接收

父組件透過事件綁定語法 () 接收子組件事件。Angular 提供 $event 特殊變數用於接收傳遞的數據：

<app-user (select)="onSelectUser($event)"></app-user>

onSelectUser(id: string) {
  console.log('User selected: ' + id);
}

select = output<string>();

功能與

@Output() select = new EventEmitter()

完全相同，新語法更為簡潔。

技術重點

1. EventEmitter 需指定泛型類型以確保類型安全

2. 支援發送任意類型數據（原始類型、物件、陣列）

3. 事件命名應遵循具描述性的命名規範

4. 事件綁定使用 Angular 的 () 語法