如何从Angular Service中获取跨组件更新的最新共享数据

你当前的写法无法拿到最新值，核心原因有两点：

• ngOnInit 生命周期钩子只会在组件初始化阶段执行1次，你在这里是一次性读取服务的普通属性，既不能保证钩子执行时 SignUpStepComponent 已经完成了用户名赋值操作，后续服务里的属性更新也不会触发组件自动同步新值。
• 两个组件为同层级兄弟组件时，Angular 本身没有保证兄弟组件的初始化、逻辑执行顺序，完全无法依赖先后顺序去读取静态属性。

Angular 中跨组件共享同步状态的标准写法是基于 RxJS 做响应式状态存储，不管组件是什么层级关系，只要注入同一个根级服务，就能实时拿到最新值，实现步骤如下：

1. 改造服务为响应式存储 #

把原来的普通属性替换为可观察数据源，限制外部只能通过指定方法更新值，只能通过订阅获取最新值：

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

@Injectable({providedIn: 'root'})
export class UserInfoService {
  // 私有数据源，初始值为空数组，禁止外部直接修改
  private readonly _userNames = new BehaviorSubject<string[]>([]);
  // 暴露只读可观察对象供外部订阅
  readonly userNames$ = this._userNames.asObservable();

  // 统一提供更新用户名的方法
  updateUserNames(names: string[]) {
    this._userNames.next(names);
  }
}

2. 改造写入组件的更新逻辑 #

不要直接给服务属性赋值，调用服务提供的更新方法推送新值：

import { Component } from '@angular/core';
import { UserInfoService } from './user-info.service';

@Component({
  // 组件元数据保持原有配置即可
})
export class SignUpStepComponent {
  constructor(private userInfoService: UserInfoService){}
  
  // 执行完注册相关逻辑后，调用更新方法推送最新值
  afterSignUpLogic() {
    this.userInfoService.updateUserNames(['Tim']);
  }
}

3. 改造读取组件的取值逻辑 #

不要在初始化时一次性读取静态值，改为订阅服务暴露的可观察对象，每次值更新都会自动同步到组件本地属性：

注意要处理订阅取消逻辑避免内存泄漏，最省事的写法是直接用 Angular 内置的 async 管道，不需要手动管理订阅生命周期。

如果需要在组件类里操作数据，就用手动订阅+销毁时取消的写法：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { UserInfoService } from './user-info.service';
import { Subject, takeUntil } from 'rxjs';

@Component({
  // 组件元数据保持原有配置即可
})
export class ReviewAccountStepComponent implements OnInit, OnDestroy {
  customerNames: string[] = [];
  private readonly destroy$ = new Subject<void>();

  constructor(private userInfoService: UserInfoService){}
  
  ngOnInit() {
    this.userInfoService.userNames$
      .pipe(takeUntil(this.destroy$))
      .subscribe(latestNames => {
        this.customerNames = latestNames;
      });
  }

  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

如果只需要在模板里渲染列表，直接用 async 管道即可，代码更简洁：

// 组件类代码
import { Component } from '@angular/core';
import { UserInfoService } from './user-info.service';

@Component({
  // 组件元数据保持原有配置即可
})
export class ReviewAccountStepComponent {
  customerNames$ = this.userInfoService.userNames$;
  constructor(private userInfoService: UserInfoService){}
}

模板中直接使用：

<ul>
  <li *ngFor="let name of customerNames$ | async">{{name}}</li>
</ul>

• 同层级兄弟组件的场景完全不影响这个方案，因为 providedIn: 'root' 标记的服务是整个应用级的单例，不管哪个层级的组件注入，拿到的都是同一个实例，数据更新会同步到所有订阅者。
• 不要用直接修改服务普通属性+ngDoCheck 轮询值的写法，性能差且容易引出隐性bug，响应式订阅是 Angular 官方推荐的标准实现。

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