BehaviorSubject触发多次求助：同组件路由导航后删除操作重复执行

核心问题是同一组件路由参数变化时，重复创建了selectedItems的订阅实例——由于组件未销毁，旧的订阅没有被取消，导致每次deleteButton.next()时，所有存在的订阅都会触发回调，出现多次执行deleteDocs()的情况。

具体修复步骤 #

1. 统一BehaviorSubject的类型（可选但推荐） #

你当前的deleteButton初始值是空对象，后续传入的是布尔值，类型不统一可能引发潜在问题，先修正类型：

// headerService.ts
deleteButton = new BehaviorSubject<boolean>(false);
selectedItems = this.deleteButton.asObservable();

2. 避免重复订阅，确保订阅唯一 #

由于组件未销毁，每次路由参数变化时（比如进入文件夹），如果你的订阅代码被重复执行，就会新增订阅实例。可以通过以下两种方式解决：

方式一：手动管理订阅，路由变化时先取消旧订阅

在组件中维护订阅实例的引用，每次路由参数更新前取消旧订阅：

// 组件类内
import { Subscription, Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

private destroy$ = new Subject<void>();
private selectedItemsSub?: Subscription;

ngOnInit() {
  // 监听路由参数变化
  this.route.params.subscribe(() => {
    // 先取消之前的订阅
    this.selectedItemsSub?.unsubscribe();
    // 重新创建订阅
    this.selectedItemsSub = this.headerService.selectedItems
      .pipe(takeUntil(this.destroy$)) // 组件销毁时自动取消
      .subscribe({
        next: (value) => {
          if (this.selectedRowsIds.size >= 1 && value === true) {
            this.deleteDocs();
          }
        }
      });
  });
}

ngOnDestroy() {
  // 组件销毁时清理所有订阅
  this.destroy$.next();
  this.destroy$.complete();
  this.selectedItemsSub?.unsubscribe();
}

方式二：用switchMap关联路由参数与订阅

通过switchMap操作符，让路由参数变化时自动切换到新的selectedItems订阅，旧订阅会被自动取消：

// 组件类内
import { Subject } from 'rxjs';
import { switchMap, takeUntil } from 'rxjs/operators';

private destroy$ = new Subject<void>();

ngOnInit() {
  this.route.params.pipe(
    // 路由参数变化时，切换到selectedItems的订阅
    switchMap(() => this.headerService.selectedItems),
    takeUntil(this.destroy$)
  ).subscribe({
    next: (value) => {
      if (this.selectedRowsIds.size >= 1 && value === true) {
        this.deleteDocs();
      }
    }
  });
}

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

3. 检查触发逻辑（额外验证） #

确认deleteTrigger方法是否被多次调用，比如在路由变化时是否意外触发了该方法。可以在deleteTrigger内添加日志排查：

deleteTrigger(trigger: boolean): void {
  console.log('deleteTrigger called with:', trigger);
  this.deleteButton.next(trigger);
}

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