为何Angular根组件中subscribe的回调会在页面切换时意外触发？

问题原因 #

• 订阅语法不规范：你传入subscribe的参数是{x=> { someFoo(x.name) }}，不符合RxJS的观察者对象规范，合法的观察者对象需要明确指定next属性对应回调。这种错误写法在部分版本的Angular/RxJS中会导致订阅逻辑异常，路由跳转触发全局变更检测时可能意外执行回调。
• 服务实例不唯一：如果CountrySelectionService没有声明为根级单例，而是在多个路由模块、组件的providers数组中重复声明，每次加载对应路由时会创建新的服务实例，新实例中的BehaviorSubject会立即推送初始值，触发订阅回调。
• 未过滤初始值：BehaviorSubject的固有特性是新订阅时会主动推送当前存储的最新值，如果你未做过滤，首次订阅就会触发一次回调，如果存在重复订阅的情况，路由跳转时也会重复触发。

修复方案 #

1. 修正订阅语法，两种合法写法二选一：

// 写法1：直接传入next回调
this.countrySelectionService.getActiveCountryPush().subscribe(x => { 
  someFoo(x.name);
});

// 写法2：传入完整观察者对象，明确指定next属性
this.countrySelectionService.getActiveCountryPush().subscribe({
  next: x => { someFoo(x.name); }
});

2. 确保服务为全局单例，修改服务的@Injectable装饰器配置，同时删除所有模块、组件providers数组中重复声明的CountrySelectionService：

@Injectable({
  providedIn: 'root' // 指定服务在根注入器注册，全局唯一实例
})
export class CountrySelectionService {
  // 原有业务逻辑保持不变
}

3. 如果你仅需要在_activeCountry主动更新时触发回调，不需要订阅时获取初始值，可添加skip(1)操作符跳过首次推送的初始值：

import { skip } from 'rxjs/operators';

ngOnInit(): void {
  this.countrySelectionService.getActiveCountryPush()
    .pipe(skip(1)) // 跳过初始值通知
    .subscribe(x => { 
      someFoo(x.name);
    });
}

4. 添加订阅销毁逻辑避免内存泄漏：

import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

export class AppComponent {
  private destroy$ = new Subject<void>();

  ngOnInit(): void {
    this.countrySelectionService.getActiveCountryPush()
      .pipe(takeUntil(this.destroy$))
      .subscribe(x => { 
        someFoo(x.name);
      });
  }

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

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