如何在Angular嵌套Signal中触发根Signal的更新？

在Angular中使用包含嵌套对象的Signal时，遇到双向绑定与变更触发的矛盾问题：

1. 初始使用单层对象Signal：

myNestedSignal = signal({
    name: "Alice",
    address: {
        city: "Wonderland",
        zip: 12345
    }
})

• 需求：结合模板驱动表单做双向绑定，同时用computed信号跟踪myNestedSignal的变化
• 问题：绑定子属性（如zip）后值确实改变，但不会触发myNestedSignal的变更事件，导致依赖它的computed不更新

2. 尝试嵌套Signal结构：

myNestedSignal = signal({
    name: signal("Alice"),
    address: signal({
        city: signal("Wonderland"),
        zip: signal(12345)
    })
})

• 问题：更新子Signal（如zip）时，仅该子Signal触发变更，父级的address和myNestedSignal不会触发，不符合需求

期望效果：更新子属性（如zip）时，对应的父级Signal（address、myNestedSignal）触发变更，但无关的Signal（city、name）不受影响。同时希望避免以下方案：

• 用包含所有Signal的computed（认为是hack）
• 手动通过ngModelChange更新Signal

1. 不可变更新+属性封装（适配模板驱动表单） #

Angular Signal的变更触发依赖引用变化，修改嵌套属性时必须返回新的对象引用，同时可以通过封装属性实现双向绑定自动触发父级变更：

封装更新工具函数 #

import { WritableSignal } from '@angular/core';

function updateNested<T>(parentSignal: WritableSignal<T>, updater: (current: T) => T): void {
  parentSignal.update(updater);
}

为嵌套属性创建getter/setter #

get zip(): number {
  return this.myNestedSignal().address.zip;
}

set zip(newValue: number) {
  updateNested(this.myNestedSignal, current => ({
    ...current,
    address: {
      ...current.address,
      zip: newValue
    }
  }));
}

模板中直接绑定封装后的属性即可：

<input type="number" [(ngModel)]="zip">

• 原理：通过扩展运算符创建新的对象/嵌套对象引用，强制触发父级Signal的变更，同时保持模板绑定的简洁性

2. 使用Angular model()函数（推荐） #

Angular 16+提供的model()函数，专门适配模板驱动表单的双向绑定，自动处理嵌套属性的引用更新：

import { model, computed } from '@angular/core';

// 用model创建支持双向绑定的信号
myNestedModel = model({
    name: "Alice",
    address: {
        city: "Wonderland",
        zip: 12345
    }
});

// 依赖它的computed会正常跟踪所有嵌套属性变更
userInfoComputed = computed(() => {
  const user = this.myNestedModel();
  return `${user.name} - ${user.address.city} ${user.address.zip}`;
});

模板中直接绑定嵌套属性：

<input [(ngModel)]="myNestedModel().name">
<input [(ngModel)]="myNestedModel().address.city">
<input [(ngModel)]="myNestedModel().address.zip">

• 原理：model()内部会自动拦截属性修改，返回新的对象引用，触发父级信号的变更，无需手动处理不可变更新

3. 嵌套Signal的联动订阅（特定场景使用） #

如果坚持使用嵌套Signal结构，可以通过effect订阅子Signal的变更，手动更新父级Signal的引用：

import { signal, effect } from '@angular/core';

// 初始化嵌套Signal
const zipSignal = signal(12345);
const addressSignal = signal({
  city: signal("Wonderland"),
  zip: zipSignal
});
const myNestedSignal = signal({
  name: signal("Alice"),
  address: addressSignal
});

// zip变更时更新address的引用
effect(() => {
  zipSignal(); // 触发依赖追踪
  addressSignal.set({...addressSignal(), zip: zipSignal});
});

// address变更时更新父级引用
effect(() => {
  addressSignal(); // 触发依赖追踪
  myNestedSignal.set({...myNestedSignal(), address: addressSignal});
});

• 注意：这种方式需要维护订阅关系，相对繁琐，仅适合必须使用嵌套Signal的场景

内容的提问来源于stack exchange，提问作者T. Jami