Angular 13订阅服务变更时如何实时同步更新TS内变量值

你当前模板绑定能正常更新，说明组件类上的message属性本身是会被实时赋值的，你在TS代码中拿不到最新值的核心原因是：

• Observable的subscribe回调是异步执行的，你把console.log写在了订阅语句的外部，刚完成订阅注册就立刻读取this.message，这时候回调还没触发，值自然是初始空值。
• 另外你的服务目前没有明确配置为全局单例，如果在多个层级的组件providers中重复声明该服务，会生成多个服务实例，导致值无法同步（你当前场景没触发这个问题，但属于潜在隐患）。

1. 优化服务为全局单例，新增同步取值方法 #

修改TestService的注入配置，保证整个应用共用同一个服务实例，同时利用BehaviorSubject自带的getValue()方法暴露同步取值能力，方便特殊场景下直接拿最新值：

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

@Injectable({
  providedIn: 'root' // 全局单例，无需再在组件providers数组中声明该服务
})
export class TestService {
  private messageSource = new BehaviorSubject<string>('');
  currentMessage = this.messageSource.asObservable();

  constructor() {}

  // 同步获取当前最新值
  getLatestMessage(): string {
    return this.messageSource.getValue();
  }

  changeMessage(message: string) {
    this.messageSource.next(message);
  }
}

注意：加了providedIn: 'root'之后，要把所有组件@Component装饰器里providers数组中的TestService删掉，否则还是会生成多实例。

2. 调整订阅逻辑，所有依赖最新值的逻辑放到回调内 #

所有需要第一时间拿到最新message的逻辑，必须写在subscribe的回调函数里，不要写在订阅语句外部：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subject, takeUntil } from 'rxjs';
import { TestService } from './test.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit, OnDestroy {
  message: string;
  // 用于取消订阅，防止内存泄漏
  private destroy$ = new Subject<void>();

  constructor(private ts: TestService) {}

  ngOnInit(): void {
    this.ts.currentMessage
      .pipe(takeUntil(this.destroy$))
      .subscribe((message) => {
        this.message = message;
        // 所有需要第一时间响应值变化的逻辑都写在这里
        console.log('收到最新消息: ', this.message);
        this.initPageData(); // 依赖message的业务初始化逻辑也在这里调用
      });
  }

  // 其他用户交互、路由触发的业务函数中，直接读取this.message即可
  handleUserAction() {
    // 只要订阅处于生效状态，this.message永远是最新值
    console.log('业务逻辑中读取的消息: ', this.message);

    // 极端场景下如果担心订阅异常，也可以直接从服务同步取值
    const syncMsg = this.ts.getLatestMessage();
    console.log('从服务同步读取的消息: ', syncMsg);
  }

  ngOnDestroy(): void {
    // 组件销毁时取消订阅
    this.destroy$.next();
    this.destroy$.complete();
  }
}

组件类的属性和模板绑定是共用同一个上下文的，既然模板里的{{message}}能实时更新，就说明this.message的赋值逻辑本身是生效的。只要你不是在subscribe回调执行之前的初始化阶段读取值，后续所有业务函数中访问this.message都能拿到最新结果。

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