Angular 18中同HTML内不同<div>节点Signal E更新不一致问题

测试场景与异常现象 #

我编写了Angular 18测试代码理解变更机制：通过定时器更新Signal A的值，触发Computed信号W，再将W的引用传入Signal E。实际运行中Signal E的更新表现不一致：

• 同一<div>且W可见时，Signal E会更新
• 不同<div>节点的Signal E有的从未更新

具体运行现象：

App-Template!
W/E visible
Injected W: 337 Signal E: [Computed: 337] Signal E: [Computed: 109] - 仅W可见时更新
Injected W: 337 Signal E: [Computed: 0] - 从未更新

测试代码 #

app.component.ts #

import {Component, computed, signal} from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterLink, RouterOutlet],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent {
  title = 'AngularTestV18';
  public T: boolean=true

  public A=signal(0);
  public W = computed(this.A);
  E=signal(this.W)

  private i=1
  private t=setInterval(() => {this.A.set((this.i++));
    console.log(this.W());
  }, 100);
}

app.component.html #

<div>
App-Template!
<br>
  <button (click)="T=!T">W visible</button>
<br>
<div>
  <div>
    Injected W:  {{W()}}
    Signal E: {{E()}}
    @if (T) {   Signal E: {{E()}} }

  </div>
  <div>
     @if (T) {  Injected W:  {{W()}}  }
    Signal E: {{E()}}
  </div>
</div>
</div>

现象原因分析 #

核心问题在于Signal E存储的是Computed信号W的引用，而非W的计算结果，且Signal不会自动追踪内部引用的Computed信号变化：

1. Signal的本质特性：E = signal(this.W) 中，E存储的是W这个Computed对象的引用。只有当调用E.set(...)传入新的引用时，E才会主动触发变更通知。W自身的计算值变化，并不会让E感知到。
2. 视图渲染的触发逻辑：Angular的变更检测中，只有当某个视图节点订阅了W的变化（即模板中调用了W()），Angular才会在W更新时标记该视图为"脏状态"，触发重渲染。此时该视图内的E()会被重新执行，读取到W的最新计算值。
3. 未订阅W的视图表现：对于第二个<div>，当T为false时，@if(T)包裹的W()不会渲染，该视图节点没有订阅W的变化。因此W更新时，Angular不会标记这个视图为脏，E()也就不会被重新执行，始终显示W的初始值0。

简单总结：Signal E本身不监听W的变化，它的"更新"只是所在视图重渲染时重新读取W的当前值的副作用。视图是否重渲染，取决于该视图是否订阅了W的变更。

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