使用Angular Signals实现表单适配Zoneless变更检测的最佳实践

你遇到的问题核心在于：信号的不可变性要求——直接修改person()返回的快照对象属性属于突变操作，不会触发信号更新，自然无法驱动Zoneless变更检测。以下是几种适配的最佳实践：

方案1：拆分双向绑定，通过信号set方法更新完整对象 #

把[(ngModel)]拆分为单向绑定[ngModel]和事件监听(ngModelChange)，在事件回调中通过信号的set方法创建新对象完成不可变更新：

Component (*.ts) #

protected person = model<Person>({ firstName: '', lastName: '' });

updateFirstName(value: string): void {
  // 基于当前快照创建新对象，更新目标属性
  this.person.set({ ...this.person(), firstName: value });
}

updateLastName(value: string): void {
  this.person.set({ ...this.person(), lastName: value });
}

Template (*.html) #

<input type="text" [ngModel]="person().firstName" (ngModelChange)="updateFirstName($event)">
<input type="text" [ngModel]="person().lastName" (ngModelChange)="updateLastName($event)">

方案2：将对象属性拆分为独立信号 #

如果对象属性不多，直接为每个属性创建独立的model信号，Angular支持信号与[(ngModel)]的直接双向绑定（内部自动处理信号的读/写）：

Component (*.ts) #

protected firstName = model('');
protected lastName = model('');

// 如需组合为完整Person对象，用computed信号推导
protected person = computed(() => ({
  firstName: this.firstName(),
  lastName: this.lastName()
}));

Template (*.html) #

<input type="text" [(ngModel)]="firstName">
<input type="text" [(ngModel)]="lastName">

方案3：使用mutate方法（可选，不推荐打破不可变性） #

如果不想创建新对象，可以用信号的mutate方法直接修改内部对象，同时触发信号更新。但此方法会打破不可变性，仅适合性能敏感的场景：

Component (*.ts) #

protected person = model<Person>({ firstName: '', lastName: '' });

updateFirstName(value: string): void {
  this.person.mutate(p => p.firstName = value);
}

Template (*.html) #

<input type="text" [ngModel]="person().firstName" (ngModelChange)="updateFirstName($event)">

内容的提问来源于stack exchange，提问作者Robert Hegner