@Input()、input()

Input 屬性宣告

裝飾器語法 (舊)

@Input({ required: true }) avatar!: string;

• 使用非空斷言 ! 停用 TypeScript 嚴格初始化檢查

• required: true 提供 Angular 執行時檢查

• 型別為純 string

Input Function (新)

avatar = input.required<string>();

• Angular 17 引入的新語法

• 型別為 InputSignal<string>

• 使用時需加上 ()：this.avatar()

最佳實踐

// ✅ 推薦寫法：同時使用 required 和非空斷言
@Input({ required: true }) avatar!: string;

// ⚠️ 只使用非空斷言：缺少執行時檢查
@Input() avatar!: string;

// ⚠️ 只使用 required：仍需處理 TypeScript 初始化檢查
@Input({ required: true }) avatar: string;

Input 值修改原則

單向數據流

Input 屬性應只由父組件修改，保持數據流向的可預測性。

錯誤示範

@Component({...})
export class UserComponent {
  @Input() name!: string;

  changeName() {
    this.name = 'New Name';  // ❌ 不應在組件內部改變 input 值
  }
}

正確做法

@Component({...})
export class UserComponent {
  @Input() name!: string;
  localName = '';  // 建立本地狀態

  ngOnChanges() {
    this.localName = this.name;  // 複製到本地狀態
  }

  changeName() {
    this.localName = 'New Name';  // 修改本地狀態
  }
}

替代方案

1. 使用本地狀態儲存副本

2. 使用 Output 通知父組件進行修改

3. 使用 signal input 的 .model() 實現雙向綁定