Input / Output 設定選項

Input 設定選項

Angular 提供了幾種方式來設定 @Input() 的行為，讓資料傳遞更加靈活。

alias 選項

使用 alias 可以為 input 屬性設定別名，使得元件內部的屬性名稱與外部使用的名稱可以不同：

// 新版 signals 寫法
data = input.required<Ticket>({ alias: 'task' });

這樣設定後：

• 在元件內部，我們使用 this.data() 來存取此屬性

• 在元件外部（父元件的模板），則使用 [task] 來綁定資料

<!-- 在父元件範本中 -->
<app-ticket-card [task]="someTicket"></app-ticket-card>

注意：除非有充分的理由，否則不建議使用 alias，因為這樣可能導致混淆和理解困難。

transform 選項

transform 選項允許你提供一個函數，這個函數會在元件接收到輸入值時自動執行，並可以轉換該值：

// 新版 signals 寫法
data = input.required<Ticket>({
  transform: (value) => {
    // 如果收到字串，轉為物件
    if (typeof value === 'string') {
      return JSON.parse(value);
    }
    return value;
  }
});

transform 非常適合用於：

• 資料型別轉換（如字串轉物件）

• 資料淨化與驗證

• 預設值處理

• 複雜物件的深拷貝

Output 設定選項

Output 相較於 Input 設定選項較少，主要就是 alias。

alias 選項

// 新版 signals 寫法
close = output<void>({ alias: 'closeAction' });

// 使用時
this.close.emit();

在父元件中監聽事件時，使用別名：

<!-- 在父元件範本中 -->
<app-modal (closeAction)="handleClose()"></app-modal>

---

傳統裝飾器寫法對比

對比新版的 signal 寫法，傳統的裝飾器寫法也支援這些設定：

Input 裝飾器寫法

// 使用 alias
@Input('task') data: Ticket;

// 沒有直接的 transform 選項，通常透過 setter 實現
private _data: Ticket;
@Input('task') 
set data(value: Ticket | string) {
  if (typeof value === 'string') {
    this._data = JSON.parse(value);
  } else {
    this._data = value;
  }
}
get data(): Ticket {
  return this._data;
}

Output 裝飾器寫法

@Output('closeAction') close = new EventEmitter<void>();

最佳實踐

1. 一致性: 選擇一種風格並在整個應用中保持一致

2. 命名: 使用有意義的名稱，避免簡寫

3. 謹慎使用 alias: 只在確實需要時使用別名