Angular Signal Effect未触发问题求助

问题场景 #

1. Signal在全局服务中定义：

@Injectable({
  providedIn: 'root'
})
export class ProductSidenavService {

  public productSidenavSignal = signal<ProductSidenavModel>(new ProductSidenavModel())

  public updateProductSidenav(productSidenav: ProductSidenavModel): void {
    this.productSidenavSignal.set(productSidenav)
    console.log('ProductSidenavService.productSidenavSignal', this.productSidenavSignal())
  }
}

2. 侧边栏模板中，复选框变更时触发组件方法：

<section>
<h5>{{productSidenav.category.title}}</h5>
<ul class="list-unstyled">
    <li *ngFor="let category of productSidenav.category.categories">
        <input [(ngModel)]="category.checked" name="category" 
            type="checkbox" class="me-2"
            (change)="getProducts()">
        <label class="form-label">{{category.name}}</label>
    </li>
</ul>
</section>

3. 侧边栏组件调用服务方法更新Signal：

export class ProductSidenavComponent {
  private productSidenavService = inject(ProductSidenavService)

  public productSidenav = this.productSidenavService.productSidenavSignal();

  public getProducts = () => {
    console.log('productSidenav', this.productSidenav)
    this.productSidenavService.updateProductSidenav(this.productSidenav)
  }
}

4. 产品列表组件中定义Effect，但Signal更新时未触发：

export class ProductComponent {
  private productSidenavService = inject(ProductSidenavService)
  private productService = inject(ProductService)
  public productSidenav = this.productSidenavService.productSidenavSignal();

  constructor() {
    effect(() => { 
      console.log('ProductComponent.productSidenav', this.productSidenav);
      this.productService.getProducts(this.productSidenavService.productSidenavSignal());
    });
  }
}

5. 数据模型定义：

export class ProductSidenavModel {
  category = {
    title: 'Category',
    categories: [
      { name: 'Living Room Sets', checked: false },
      { name: 'Sectionals', checked: false },
      { name: 'Sofas', checked: false },
      { name: 'Chair and Seating', checked: false }
    ],
  };
}

问题原因 #

1. Signal引用与值的混淆：组件中productSidenav = signal()只是获取了Signal的初始值，并非绑定Signal本身。后续Signal更新时，这个变量不会同步最新值。
2. Effect未追踪Signal依赖：ProductComponent的Effect函数内，没有直接读取Signal的当前值（即调用signal()），Angular响应式系统无法识别这个Effect依赖于Signal的变化。
3. 对象引用未变更导致Signal不触发更新：通过ngModel修改的是ProductSidenavModel内部的属性，调用set()时传入的是同一个对象引用。Signal默认用引用相等性检查值是否变化，会判定值未更新，因此不会通知订阅者。

解决方案 #

1. 修改服务的更新逻辑，使用mutate()替代set() #

当需要修改Signal对象的内部属性时，用mutate()可以强制Signal通知订阅者，无需改变对象引用：

@Injectable({
  providedIn: 'root'
})
export class ProductSidenavService {

  public productSidenavSignal = signal<ProductSidenavModel>(new ProductSidenavModel())

  // 不需要传入对象，直接修改当前Signal的内部状态
  public updateProductSidenav(): void {
    this.productSidenavSignal.mutate(current => {
      // 无需额外操作，ngModel已修改current的属性，mutate会触发更新通知
    });
    console.log('ProductSidenavService.productSidenavSignal', this.productSidenavSignal())
  }
}

2. 组件中直接引用Signal而非初始值 #

侧边栏组件中，保存Signal的引用而非初始值，确保模板和方法能获取最新状态：

export class ProductSidenavComponent {
  private productSidenavService = inject(ProductSidenavService)

  // 直接引用Signal对象，而非调用()获取初始值
  public productSidenavSignal = this.productSidenavService.productSidenavSignal;

  public getProducts = () => {
    console.log('productSidenav', this.productSidenavSignal())
    this.productSidenavService.updateProductSidenav()
  }
}

同时修改模板，通过Signal调用()获取最新值：

<section>
<h5>{{productSidenavSignal().category.title}}</h5>
<ul class="list-unstyled">
    <li *ngFor="let category of productSidenavSignal().category.categories">
        <input [(ngModel)]="category.checked" name="category" 
            type="checkbox" class="me-2"
            (change)="getProducts()">
        <label class="form-label">{{category.name}}</label>
    </li>
</ul>
</section>

3. 让Effect正确追踪Signal依赖 #

在ProductComponent的Effect函数内，必须直接调用signal()读取当前值，确保Angular能识别依赖关系：

export class ProductComponent {
  private productSidenavService = inject(ProductSidenavService)
  private productService = inject(ProductService)

  constructor() {
    effect(() => { 
      // 在Effect内部读取Signal的最新值，触发依赖追踪
      const currentSidenav = this.productSidenavService.productSidenavSignal();
      console.log('ProductComponent.productSidenav', currentSidenav);
      this.productService.getProducts(currentSidenav);
    });
  }
}

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