Angular ngOnInit中两个subscribe结果合并为字符串的实现方案

出现这个现象的核心原因是RxJS Subject的订阅回调是异步执行的。JS是单线程运行的，执行顺序上会先跑完ngOnInit里的所有同步代码（也就是你写的console.log、拼接判断逻辑），等主线程空了之后，才会处理后续触发的订阅回调，给val、col变量赋值。所以当代码走到同步判断逻辑时，两个变量还停留在初始的空字符串状态，自然达不到预期。

思路1：用RxJS组合操作符合并流（最贴合需求，推荐） #

• 不需要单独拆分两个订阅做零散的赋值判断，直接用combineLatest聚合两个主题流，只要任意一个流推送新值，就会同步拿到两个流当前的最新值
• 搭配filter操作符做前置校验，只有当两个值都非空时，才执行拼接推送到inputValue的逻辑，天然解决了异步赋值的时序问题
• 记得通过takeUntil搭配销毁主题的方式，在组件销毁时退订，避免内存泄漏

参考实现代码：

// 先导入需要的RxJS工具
import { combineLatest, Subject } from 'rxjs';
import { filter, takeUntil } from 'rxjs/operators';

// 组件类内部属性
val = '';
col = '';
inputValue: string[] = [];
// 用来标记组件销毁的流
private destroy$ = new Subject<void>();

ngOnInit() {
  // 组合两个主题流，统一监听值变化
  combineLatest([
    this.globalSearchService.searchTerm,
    this.globalSearchService.searchColumn
  ]).pipe(
    // 过滤出两个值都非空的场景
    filter(([term, column]) => term != null && column != null && term !== '' && column !== ''),
    // 组件销毁时自动退订
    takeUntil(this.destroy$)
  ).subscribe(([term, column]) => {
    // 这里拿到的永远是两个流的最新值
    this.val = term;
    this.col = column;
    // 直接执行拼接推送即可
    this.inputValue.push(`${column} | ${term}`);
    console.log('最新值同步完成', this.val, this.col);
  });
}

// 组件销毁生命周期
ngOnDestroy() {
  this.destroy$.next();
  this.destroy$.complete();
}

思路2：把业务判断逻辑移到订阅回调内部 #

如果不想引入组合操作符，可以把原来写在同步位置的拼接判断逻辑，抽成公共方法，在两个订阅的回调里，每次完成变量赋值后就调用一次判断：

• 不管是searchTerm还是searchColumn推送新值，只要当前两个变量都满足非空条件，就执行拼接推送
• 这种方式不需要额外引入RxJS操作符，逻辑直观，但要注意去重，避免两个流连续推送相同值时出现重复推送的问题

参考实现代码：

val = '';
col = '';
inputValue: string[] = [];

ngOnInit() {
  this.globalSearchService.searchTerm.subscribe((newValue: string) => {
    console.log('收到搜索关键词', newValue);
    if (newValue == null) return;
    this.val = newValue;
    // 赋值完成后立刻执行拼接判断
    this.tryPushCombinedValue();
  });

  this.globalSearchService.searchColumn.subscribe((column: string) => {
    console.log('收到搜索列', column);
    if (column == null) return;
    this.col = column;
    // 赋值完成后立刻执行拼接判断
    this.tryPushCombinedValue();
  });
}

// 抽离公共判断逻辑
private tryPushCombinedValue() {
  if (this.col !== '' && this.val !== '') {
    this.inputValue.push(`${this.col} | ${this.val}`);
  }
}

• 所有依赖订阅返回值的业务逻辑，必须写在subscribe的回调内部，不能写在subscribe方法的外层，否则永远拿不到异步赋值后的最新值
• 不要在ngOnInit的同步代码段，依赖订阅回调里的变量值做判断，两者的执行时序天然存在先后差
• 对于长期监听的全局服务主题，一定要在组件销毁时退订，否则组件实例会被流引用，造成内存泄漏

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