在 Angular 中使用信号进行 2 路绑定与使用普通属性相比有何含义？

Question

根据文档，我可以创建一个双向绑定使用普通属性，也可以使用信号。

它没有解释这两种选择所隐含的利弊。

我可以得出结论，如果我希望父组件根据信号进行操作（无论与其子组件的绑定如何），我应该使用信号（反之亦然）。但我想知道这是否就是全部。我怀疑这里面有更深层的含义，可能会成为未来的一个问题。

为组件之间的双向绑定应用/拒绝信号有哪些隐含的警告？

@Component({  template: '<app-child [(beep)]="beep" />', ... })
export class Parent { protected beep = signal("signals"); }

@Component({  template: '<app-child [(beep)]="beep" />', ... })
export class Parent { protected beep = "plain props"; }

Answer 1

信号允许开发人员使用反应性。

信号有助于减少对

zone.js

（用于变更检测）的依赖，并使软件包更轻（具有相同的功能），这是 Angular 团队正在努力实现的

Zoneless Angular

。

信号是更新数据以及对源信号的变化做出反应的最有效方式。

当信号值发生变化时，您可以链接其他属性/操作来发生。

通常要充分利用信号功率，您需要使用

ChangeDetectionStrategy.OnPush

。但由于

computed

的缓存，它会提供一点点提升。

您可以自由地使用正常的 Angular 方法，只是有更好的方法可以尝试。

---

以

computed

为例。计算出的信号可用于根据其他状态变量导出状态变量。

@Component({  
  template: `
    <app-child [(ngModel)]="beep" />
    
  `, 
})
export class Parent { 
  protected beep = signal("signals"); 
  protected computedSignal = computed(() => {
    const beepVal = this.beep();
    return beepVal * 2;
  });
}

假设顶部计算函数是资源密集型计算。计算可以节省您的资源，因为计算的信号都是延迟评估和记忆的。

即使您的更改检测触发多次，计算也只会发生一次，直到观察到的信号发生更改，然后它会删除缓存的值并重新评估。

---

以

effect

为例，它非常适合对信号变化做出反应并产生副作用。

您无法在效果内设置信号，但您可以使用可观察量，当信号发生变化时会重新计算。

@Component({  
  template: `
    <app-child [(ngModel)]="beep" />
    
  `, 
})
export class Parent { 
  protected beep = signal("signals"); 
  protected beepDetails$ = of([]);

  constructor() {
    effect(() => {
       if(this.beep() > 100) {
          this.popupService.show('beep value cannot be greater than 100);
       }
    });
  }
}

在下面的示例中，蜂鸣声的更改执行蜂鸣声不能大于 100 的验证并显示弹出窗口。

---

这只是表面现象，有关完整的综合指南，请前往

angular.dev