Angular中computed内调用toSignal报NG0602错误的原因及疑问

报错代码示例 #

source$ = of(1);
value = computed(() => toSignal(this.source$));

constructor() {
  effect(() => {
    console.log(this.value());
  });
}

抛出的错误信息 #

ERROR
Error: NG0602: toSignal() cannot be called from within a reactive context. Invoking `toSignal` causes new subscriptions every time. Consider moving `toSignal` outside of the reactive context and read the signal value where needed.

错误原因 #

Angular禁止在响应式上下文（比如computed、effect的回调函数内部）调用toSignal，核心原因如下：

• toSignal每次被调用时，都会针对传入的Observable创建一个新的订阅和对应Signal实例。
• computed的回调会在其依赖发生变化时重新执行，如果把toSignal放在computed内部，每次重新执行都会生成新的订阅，这会造成不必要的资源消耗，甚至引发内存泄漏，同时破坏响应式系统的稳定性。

可行代码示例 #

将toSignal与computed拆分后即可正常运行：

source$ = of(1);
v = toSignal(this.source$);

value = computed(() => this.v());

constructor() {
  effect(() => {
    console.log(this.value());
  });
}

两种写法的核心差异 #

1. 报错写法：toSignal被放在computed的响应式上下文中，每次computed执行都会触发新的toSignal调用，生成新的订阅和Signal，违反了Angular的响应式规则。
2. 可行写法：toSignal在类属性初始化阶段（非响应式上下文）执行，只会创建一次订阅和对应Signal实例。后续computed仅读取这个已存在的Signal的值，既利用了computed的缓存特性，又不会重复创建订阅，完全符合Angular的要求。

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