Angular 17列表类型Signal变更检测问题（从Angular 16迁移）

问题本质 #

你的代码中列表Signal的effect不触发的核心原因是：Signal的set方法通过引用相等性判断值是否变更。你在sum()里先获取Signal的数组引用，直接修改数组内容（tempList.push(...)），然后把同一个数组引用传给set，Angular会判定值没有变化，因此关联的effect不会执行。Angular 17对Signal的变更检测逻辑做了更严格的优化，这导致原本在Angular 16中可能被“误判”触发的场景，在17中不再生效。

而对象Signal能正常触发effect，是因为每次set的都是全新的对象实例（{id: this.cnt, name: ...}），引用完全不同，Signal能正确识别到值变更。

解决方案 #

以下是三种可行的修复方式：

1. 创建新数组引用（最通用）

避免直接修改原数组，通过扩展运算符或concat生成新数组后再set：

sum(){
  this.cnt += 1;
  const newItem = {id: this.cnt, name: this.cnt.toString()};
  // 用扩展运算符创建新数组
  this.listObjectSignals.set([...this.listObjectSignals(), newItem]);
  this.objectSignal.set(newItem);
}

2. 使用Signal的update方法（更简洁）

利用update方法直接基于当前值生成新数组，无需手动获取再set：

sum(){
  this.cnt += 1;
  const newItem = {id: this.cnt, name: this.cnt.toString()};
  this.listObjectSignals.update(currentList => [...currentList, newItem]);
  this.objectSignal.set(newItem);
}

3. 使用Angular 17新增的mutableSignal（适合频繁内部修改场景）

如果需要频繁修改数组内部元素，不想每次创建新引用，可以使用mutableSignal，它支持直接修改值的内部状态并自动触发变更：

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

@Component({
  selector: 'app-test-signals',
  standalone: true,
  imports: [],
  template: `
    <div>
        <button (click)="sum()"> add </button>
    </div>
  `,
  styles: ``
})
export class TestSignalsComponent {
  // 替换原signal为mutableSignal
  listObjectSignals = mutableSignal<{id:number, name:string}[]>([])
  objectSignal = signal<{id:number, name:string}>({id:0, name:'0'})
  cnt = 1;
  
  constructor(){
    effect(()=>{
      console.log(`List signal not triggered: ${this.listObjectSignals()}`)
    })
    effect(()=>{
      console.log(`Object signal triggered successfully: ${this.objectSignal()}`)
    })
  }

  sum(){
    this.cnt += 1;
    const newItem = {id: this.cnt, name: this.cnt.toString()};
    // 直接修改数组即可触发变更
    this.listObjectSignals().push(newItem);
    this.objectSignal.set(newItem);
  }
}

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