Angular中非信号值如何通知组件更新UI？

当Angular服务使用非信号属性时，组件不会像使用信号那样自动收到更新通知，要让组件响应数据变化，通常有以下几种实现方式：

1. 用RxJS可观察对象包装数据 #

把服务里的非信号值用BehaviorSubject或Subject包装，组件通过订阅这个可观察对象来监听变化。配合Angular的async管道使用时，异步管道会自动触发变更检测，无需手动操作。

服务代码示例：

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class DataService {
  // 用BehaviorSubject存储数据，初始值为0
  private _dataSource = new BehaviorSubject<number>(0);
  // 对外暴露只读的可观察对象
  public data$ = this._dataSource.asObservable();

  updateData() {
    const currentValue = this._dataSource.value;
    this._dataSource.next(currentValue + 1);
  }
}

组件模板示例：

<p>当前数据：{{ dataService.data$ | async }}</p>

2. 手动触发变更检测 #

在服务中定义一个事件通知机制（比如用Subject发送更新信号），组件订阅该事件后，通过ChangeDetectorRef手动触发变更检测，让Angular重新计算组件视图。

服务代码示例：

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class DataService {
  public dataUpdated = new Subject<void>();
  public nonSignalData = 0;

  updateData() {
    this.nonSignalData++;
    // 发送更新通知
    this.dataUpdated.next();
  }
}

组件代码示例：

import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
import { DataService } from './data.service';

@Component({
  template: `<p>当前数据：{{ dataService.nonSignalData }}</p>`
})
export class MyComponent implements OnInit {
  constructor(
    public dataService: DataService,
    private cdr: ChangeDetectorRef
  ) {}

  ngOnInit() {
    this.dataService.dataUpdated.subscribe(() => {
      // 标记组件需要进行变更检测
      this.cdr.markForCheck();
    });
  }
}

3. 依赖Angular自动变更检测周期 #

Angular会在一些异步操作（比如用户点击、定时器、HTTP请求完成）后自动触发变更检测。如果服务的非信号值是在这些异步操作中更新的，组件模板绑定的属性会被自动检测到变化并更新UI。但这种方式有局限性：如果是同步更新数据，或者更新操作不在Angular的变更检测上下文里，UI不会自动刷新。

比如同步更新的场景：

// 组件内同步调用服务更新方法
onClick() {
  this.dataService.nonSignalData++;
  // 此时UI不会立即更新，除非手动触发变更检测或等待下一次自动检测周期
}

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