信号在 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,
}
],
};
仅当信号内的值发生变化时,
effect
才会触发。
正如你所知,在 JS 中,数组和对象作为引用存储在内存中,更新内部属性并仅返回相同的对象,不会导致内存引用发生变化。因此
effect
不会触发。
而是使用
someArray.slice()
(对于数组)和对象解构 ({...someSignal() }
)(对于对象)来创建新的内存引用,以便信号拾取更改。
this.productSidenavSignal.set({ ...productSidenav })