ngrx/store订阅多次触发，ngOnDestroy未调用时的最佳退订方式

这种情况我在项目里也踩过坑——弹窗组件因为没走路由跳转，加上如果是用隐藏而非销毁的方式处理弹窗，ngOnDestroy确实不会触发，导致NgRx的订阅一直挂着，重复打开弹窗就会多次执行回调。给你几个实用的解决方案，按推荐优先级排序：

1. 优先使用Angular async 管道（最省心） #

这是Angular官方推荐的订阅管理方式，完全不用手动处理退订。只要你在模板中用到Store的数据，直接把Observable绑定到模板，Angular会自动在组件销毁（或弹窗关闭导致组件不可见/销毁）时退订。

示例代码：

组件类 #

import { Store } from '@ngrx/store';
import { Observable } from 'rxjs';

export class UserModalComponent {
  // 直接把Store的Observable暴露给模板
  user$: Observable<User> = this.store.select('user');

  constructor(private store: Store<AppState>) {}
}

模板 #

<div class="modal-content" *ngIf="isModalOpen">
  <!-- 用async管道订阅，自动管理生命周期 -->
  <div *ngIf="user$ | async as currentUser">
    当前用户：{{ currentUser.name }}
  </div>
</div>

这种方式完全规避了手动订阅的风险，只要能在模板中直接使用数据，一定要优先用它。

2. 利用弹窗的关闭事件配合RxJS takeUntil #

如果你的业务逻辑必须在组件类中处理订阅（比如需要在订阅回调里做复杂逻辑），可以用takeUntil操作符，把订阅的生命周期和弹窗的关闭事件绑定。

示例代码：

import { Store } from '@ngrx/store';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'; // 以NgBootstrap为例

export class UserModalComponent {
  // 定义一个销毁信号Subject
  private destroy$ = new Subject<void>();

  constructor(
    private store: Store<AppState>,
    public activeModal: NgbActiveModal // 注入弹窗的ActiveModal实例
  ) {
    // 订阅Store，用takeUntil监听销毁信号
    this.store.select('user')
      .pipe(takeUntil(this.destroy$))
      .subscribe(user => {
        // 你的业务逻辑
        if (user?.id === this.newUserId) {
          this.activeModal.close(user);
        }
      });

    // 监听弹窗关闭事件，触发销毁信号
    this.activeModal.closed.subscribe(() => {
      this.destroy$.next();
      this.destroy$.complete(); // 完成Subject，避免内存泄漏
    });
  }
}

这里的核心是把弹窗的关闭事件作为订阅的终止信号，不管ngOnDestroy有没有触发，只要弹窗关闭，就会自动退订所有用takeUntil(this.destroy$)的Observable。

3. 手动管理Subscription（备选方案） #

如果你用的弹窗库没有提供关闭回调，或者不想用RxJS操作符，可以手动保存Subscription实例，在弹窗关闭时调用unsubscribe()。

示例代码：

import { Store } from '@ngrx/store';
import { Subscription } from 'rxjs';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';

export class UserModalComponent {
  private userSubscription: Subscription;

  constructor(
    private store: Store<AppState>,
    public activeModal: NgbActiveModal
  ) {
    // 保存订阅实例
    this.userSubscription = this.store.select('user').subscribe(user => {
      // 业务逻辑
    });

    // 弹窗关闭时手动退订
    this.activeModal.closed.subscribe(() => {
      if (this.userSubscription) {
        this.userSubscription.unsubscribe();
      }
    });
  }
}

这种方式需要注意不要遗漏退订，尤其是如果有多个订阅的话，要逐个管理，不如takeUntil方便。

额外提醒：检查弹窗的销毁逻辑 #

你提到ngOnDestroy从未被调用，可能是因为弹窗组件只是被隐藏（比如用*ngIf="false"或者CSS隐藏）而不是被销毁。如果你的弹窗库支持，尽量设置为关闭时销毁组件（比如NgBootstrap的NgbModal默认就是关闭时销毁组件的），这样ngOnDestroy就会正常触发，你也可以在ngOnDestroy里处理退订：

import { Store } from '@ngrx/store';
import { Subscription } from 'rxjs';
import { OnDestroy } from '@angular/core';

export class UserModalComponent implements OnDestroy {
  private userSubscription: Subscription;

  constructor(private store: Store<AppState>) {
    this.userSubscription = this.store.select('user').subscribe(user => {
      // 业务逻辑
    });
  }

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

如果是因为组件被复用（比如缓存在DOM中），那还是回到前面的方案，用弹窗的关闭事件来绑定订阅生命周期。

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