为什么我的角度信号效果不起作用？

Question

信号在 ProductSidenavService 中创建：

@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())
  }
}

ProductSidenav.html 包含复选框，修改时，调用 ProductSidenavComponent 中的 getProducts：

<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>

productSidenavComponent 的 getProducts 调用productSidenavService.updateProductSidenav(productSidenav)以使用修改后的productSidenav更新信号。 （updateProductSidenav 如上面 ProductSidenavService 中所示）。

export class ProductSidenavComponent {
  private productSidenavService = inject(ProductSidenavService)

  public productSidenav = this.productSidenavService.productSidenavSignal();

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

ProductComponent 包含一个效果。我的期望是当在productSidenavService.updateProductSidenav 中更新信号时，将使用更新后的值调用效果。但效果没有被调用。

产品组件：

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());
    });
  }

}

产品Sidenav型号：

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,
        }
        ],
};

Answer 1

仅当信号内的值发生变化时，

effect

才会触发。

正如你所知，在 JS 中，数组和对象作为引用存储在内存中，更新内部属性并仅返回相同的对象，不会导致内存引用发生变化。因此

effect

不会触发。

而是使用

someArray.slice()

（对于数组）和对象解构 (

{...someSignal() }

)（对于对象）来创建新的内存引用，以便信号拾取更改。

this.productSidenavSignal.set({ ...productSidenav })