使用async管道时在Observable内设置signal报错，属设计还是Bug？

当我尝试在通过async管道绑定的Observable内部设置signal值时，出现如下错误：

Error: NG0600: 默认情况下，不允许在computed或effect中写入signal。可在CreateEffectOptions中使用allowSignalWrites来在effect内启用该操作。

但我并没有处于computed或effect中，而是在Observable内部。而且只有通过async管道绑定才会触发这个错误；如果直接订阅Observable并在next处理器中设置数据，就能正常工作。这是设计如此，还是一个Bug？

代码示例 #

JavaScript代码 #

refreshTrigger = new BehaviorSubject<void>(undefined);
refreshing = signal(false);
data = this.refreshTrigger.pipe(
  tap(() => {
    console.log("Refreshing");
    this.refreshing.set(true);
  }),
  map(() => "Doing real work here"),
  shareReplay(1)
);

HTML代码 #

{{refreshing() ? "Refreshing" : "Not refreshing"}} {{data | async}}

这是设计行为，并非Bug。

原因在于Angular的async管道内部是在一个effect中执行订阅逻辑的。当async管道处理Observable时，它的订阅回调会被包裹在Angular的effect上下文里，而effect默认禁止修改signal值，所以你在Observable的tap操作符里修改refreshing signal时，就会触发NG0600错误。

而直接手动订阅Observable时，订阅回调不在effect上下文内，所以不会触发这个限制。

解决方法 #

有两种可行的处理方式：

• 方法一：使用带allowSignalWrites的effect
  将signal的修改逻辑移到effect中，监听Observable的变化：

  effect(() => {
    this.refreshTrigger.subscribe(() => {
      this.refreshing.set(true);
    });
  }, { allowSignalWrites: true });
  

  更优雅的方式是结合toSignal转换Observable，再用effect处理状态：

  dataSignal = toSignal(this.refreshTrigger.pipe(
    map(() => "Doing real work here"),
    shareReplay(1)
  ));
  
  effect(() => {
    const data = this.dataSignal();
    if (data) {
      this.refreshing.set(true);
    }
  }, { allowSignalWrites: true });
  

• 方法二：用untracked脱离effect上下文
  如果坚持使用async管道，可以在修改signal时用untracked函数绕过限制：

  tap(() => {
    console.log("Refreshing");
    untracked(() => {
      this.refreshing.set(true);
    });
  }),
  

  untracked会让signal的修改不被当前effect追踪，从而避免触发错误。

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