角度更新@Input() 對象

Question

我有一個自定義接口的 GameStats 對象。 如果我更改屬性的值，子組件將無法識別它。 我找到了沒有被解雇的 ngOnChanges 和仍然包含舊值的 ngDoCheck 的解決方案。

我的示例代碼：

app.component.html

<app-settings [gameStats]="gameStats"></app-settings>

app.component.ts（更新屬性）

  onRunningStatusChanged(event: any) {
      this.gameStats.gameRunning = event;
  }

settings.component.ts

@Input() gameStats!: GameStats;

Answer 1

更改檢測不會進行深度對象比較，它只檢查引用是否相同，並且在您的情況下是相同的。 您可能希望將onRunningStatusChanged處理程序更改為：

  onRunningStatusChanged(event: any) {
      this.gameStats = {...this.gameStats, gameRunning: event};
  }

這會為this.gameStats分配一個新對象，該對象具有所有屬性，但會覆蓋gameRunning屬性。