Angular Signals对RxJS Observables的影响及变更检测疑问

我正在Angular应用中切换使用Signals，在探索最佳实践时遇到了一些意外行为：

• 原有RxJS架构下：子组件修改用户地址后，必须调用reloadUser()才能同步父组件的值
• 改用Signals后：子组件通过mutate修改用户地址，无需调用reloadUser()，父组件Component A中非Signal类型的currentUser地址也自动更新了，但该组件的getUser()订阅并未触发，看起来是按引用变更导致的

我有两个核心疑问：

1. 这种行为是否符合Angular的规范？
2. 如果禁用Zone.js、仅使用Signals，Component A中非Signal的currentUser地址变更为何能在HTML中被检测到？

相关代码片段 #

UserService 代码

export class UserService {
  private user$: Observable<User>;
  private refreshUser$ = new BehaviorSubject<void>(undefined);

  constructor(private readonly http: HttpClient) {}

  getUser(): Observable<User> {
    if (!this.user$) {
      this.user$ = this.refreshUser$.pipe(
        switchMap(() => this.http.get<User>('...')),
        shareReplay(1)
      );
    }
    return this.user$;
  }

  reloadUser(): void {
    this.refreshUser$.next();
  }
}

Component A 代码

export class aComponent {
 currentUser: User;

  constructor(private readonly userService: UserService) {
    this.userService.getUser().subscribe((user) => {
      this.currentUser = user;
    });
 }
}

原RxJS版本 aChild 组件代码

export class aChildComponent {
 currentUser: User;

  constructor(private readonly userService: UserService) {
    this.userService.getUser().subscribe((user) => {
      this.currentUser = user;
    });
 }

 changeAddress(newAddress: any) {
  this.userService.updateAddress(newAddress).subscribe((updatedAddress) => {
   this.currentUser.address = updatedAddress;
   this.userService.reloadUser();
  });
 }
}

改用Signals后的 aChild 组件代码

export class aChildComponent {
  currentUser: WritableSignal<User | undefined> = signal(undefined);

  constructor(private readonly userService: UserService) {
    this.userService.getUser().subscribe((user) => {
      this.currentUser.set(user);
    });
 }

 changeAddress(newAddress: any) {
  this.userService.updateAddress(newAddress).subscribe((updatedAddress) => {
   this.currentUser.mutate((user) => (user.address = updatedAddress));
  });
 }
}

解答 #

1. 行为是否合规？

完全合规，核心原因是对象引用共享：

• UserService.getUser()返回的Observable通过shareReplay(1)共享了同一个User对象引用，Component A和aChild组件拿到的是同一个内存对象
• 当aChild用mutate修改对象的address属性时，只是修改了这个共享对象的内部属性，并没有改变对象本身的引用
• 因此Component A的currentUser引用指向的还是同一个对象，内部属性变更自然同步；而getUser()的订阅仅在Observable发出新对象引用时触发，这里没有新对象，所以订阅不会执行

2. 无Zone.js时非Signal属性变更为何能被HTML检测到？

关键在于Signals的变更检测触发机制：

• 调用currentUser.mutate()时，Angular的Signals系统会自动触发细粒度变更检测，扫描所有依赖该Signal的视图和计算值
• 虽然Component A的currentUser不是Signal，但它的HTML模板绑定的是共享对象的属性（比如{{ currentUser.address }}），aChild的Signal变更触发的检测会遍历组件树，发现Component A模板中的属性绑定发生变化，从而更新视图
• 注意：如果禁用Zone.js且完全不使用Signals，这种内部属性变更不会被检测到；但这里因为Signals的变更操作触发了检测，所以连带更新了父组件视图

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