Angular中Rxjs Subject触发两次问题排查求助

核心问题分析 #

• component2重复订阅且订阅取消方式错误
  1. 每次component2初始化时都会执行this.appService.search2Sub$.subscribe(...)，如果component2被多次实例化（比如路由切换后返回），就会生成多个订阅实例。后续每次search2Sub$.next(true)都会触发所有存在的订阅回调，导致重复打印。
  2. ngOnDestroy中调用this.appService.search2Sub$.unsubscribe()是错误操作：这会直接终止整个Subject流，而非取消当前component2的单个订阅。正确做法是保存订阅对象，针对性取消当前组件的订阅。
• component1未清理订阅：虽不是直接触发重复的原因，但长期会导致内存泄漏，需同步处理。

修复步骤 #

1. 修正component2的订阅与取消逻辑 #

// component2
import { Subscription } from 'rxjs';

private searchSub!: Subscription; // 保存当前组件的订阅对象

ngOnInit(): void {
  this.searchSub = this.appService.search2Sub$.subscribe(data=>{
      console.log(data); // 原代码存在变量名错误，应使用data而非value
  });
}

ngOnDestroy(): void {
  if (this.searchSub) {
    this.searchSub.unsubscribe(); // 取消当前组件的订阅
  }
}

2. 清理component1的订阅，避免内存泄漏 #

// component1
import { Subscription } from 'rxjs';

private search1Sub!: Subscription;

ngOnInit(): void {
    this.search1Sub = this.appService.search1Sub$.pipe (
        debounceTime(2000), 
    ).subscribe(value => {
        this.appService.search2Sub$.next(true)
    });
}

ngOnDestroy(): void {
  if (this.search1Sub) {
    this.search1Sub.unsubscribe();
  }
}

3. 可选优化：使用AsyncPipe自动管理订阅（推荐） #

在Angular中，AsyncPipe可自动处理订阅的创建与销毁，无需手动编写订阅取消逻辑：

<!-- component2模板 -->
<!-- 若需基于search2Sub$的状态做UI渲染，直接使用AsyncPipe -->
<div *ngIf="appService.search2Sub$ | async">搜索已触发</div>

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