Angular Signal未更新HTML模板问题咨询

问题场景 #

我有一个包含Service和独立Component的Angular应用，代码如下：

SseService 代码 #

export class SseService {
    private eventSource = new EventSource('http://localhost:8080/events');
    private message = signal('default value');

    getMessageSignal(): Signal<string> {
      return this.message.asReadonly();
    }
 
    constructor() {
      this.eventSource.onmessage = event => {
        console.log('Received event: ', event);
        this.message.set(event.data as string);
      };
    }
}

AppComponent 代码 #

@Component({
    selector: 'app-root',
    standalone: true,
    imports: [CommonModule, RouterOutlet],
    templateUrl: './app.component.html',
    styleUrl: './app.component.scss',
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AppComponent {
    title = 'frontend';
    sseService = inject(SseService);
    messageSignal = this.sseService.getMessageSignal();
    // printMessage = effect(() => console.log(this.message())); //取消注释此行后，messageSignal才会在HTML中更新
}

模板代码 #

<p>{{messageSignal()}}</p>

问题：未启用effect()代码行时，messageSignal的更新无法同步到HTML模板；启用后模板才会正常更新。

原因分析 #

1. 组件使用了ChangeDetectionStrategy.OnPush，Angular仅在特定场景触发变更检测：组件@Input更新、Angular内置事件触发、手动调用变更检测方法，或组件上下文内创建的Signal更新。
2. messageSignal是在Service中创建的，SSE的onmessage回调属于Angular Zone外的异步操作，更新Signal时Angular无法自动感知变化，因此不会触发OnPush组件的变更检测。
3. 添加effect()后，effect运行在Angular Zone内，订阅Signal变化时会自动触发变更检测，模板随之更新。

解决方案 #

方案1：将Signal更新纳入Angular Zone #

在Service中注入NgZone，把Signal更新操作包裹在ngZone.run()中，确保Angular能感知到变化：

import { Injectable, NgZone } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class SseService {
    private eventSource = new EventSource('http://localhost:8080/events');
    private message = signal('default value');

    constructor(private ngZone: NgZone) {
      this.eventSource.onmessage = event => {
        console.log('Received event: ', event);
        this.ngZone.run(() => {
          this.message.set(event.data as string);
        });
      };
    }

    getMessageSignal(): Signal<string> {
      return this.message.asReadonly();
    }
}

方案2：使用toObservable() + async管道 #

将Signal转为Observable，借助async管道自动订阅并触发变更检测：

import { toObservable } from '@angular/core/rxjs-interop';
import { AsyncPipe } from '@angular/common';
import { ChangeDetectionStrategy, Component, inject } from '@angular/core';

@Component({
    selector: 'app-root',
    standalone: true,
    imports: [CommonModule, RouterOutlet, AsyncPipe],
    templateUrl: './app.component.html',
    styleUrl: './app.component.scss',
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AppComponent {
    title = 'frontend';
    sseService = inject(SseService);
    message$ = toObservable(this.sseService.getMessageSignal());
}

模板修改为：

<p>{{message$ | async}}</p>

方案3：手动调用变更检测 #

在组件中订阅Signal变化，手动调用ChangeDetectorRef.markForCheck()触发变更检测：

import { ChangeDetectionStrategy, Component, inject, effect } from '@angular/core';
import { ChangeDetectorRef } from '@angular/core';

@Component({
    selector: 'app-root',
    standalone: true,
    imports: [CommonModule, RouterOutlet],
    templateUrl: './app.component.html',
    styleUrl: './app.component.scss',
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AppComponent {
    title = 'frontend';
    sseService = inject(SseService);
    messageSignal = this.sseService.getMessageSignal();
    private cdr = inject(ChangeDetectorRef);

    constructor() {
      effect(() => {
        this.messageSignal();
        this.cdr.markForCheck();
      });
    }
}

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