Angular：如何在ngOnDestroy中释放LocationStrategy的onPopState回调

问题核心是你注册的onPopState回调未在组件销毁时移除，LocationStrategy会持续保留该回调引用，导致组件销毁后仍被触发。只需利用onPopState返回的注销函数，在ngOnDestroy中执行即可解除绑定。

修改后的代码示例： #

import { LocationStrategy, OnDestroy } from '@angular/common';
import { Component } from '@angular/core';

// 确保组件实现OnDestroy接口
@Component({...})
export class YourComponent implements OnDestroy {
  private popStateUnsubscribe?: () => void;
  private MIN_STEP_TO_PREVENT_BACK_BUTTON = 1; // 按实际业务调整值

  constructor(private location: LocationStrategy) {}

  protected preventBackButton() {
    // 保存onPopState返回的注销函数
    this.popStateUnsubscribe = this.location.onPopState(() => {
      if (this.stepper.selectedIndex > 0) {
        if (this.stepper.selectedIndex > this.MIN_STEP_TO_PREVENT_BACK_BUTTON) {
          this.preventChangePage();
        }
        this.stepper.previous();
      }
    });
  }

  ngOnDestroy(){
    // 执行注销函数移除回调
    if (this.popStateUnsubscribe) {
      this.popStateUnsubscribe();
      this.popStateUnsubscribe = undefined;
    }
  }
}

关键说明： #

• LocationStrategy.onPopState()方法会返回一个无参数注销函数，调用它就能移除之前注册的popstate事件回调。
• 必须在ngOnDestroy中执行该注销函数，确保组件销毁时清理回调，避免内存泄漏和无效逻辑触发。
• 组件必须实现OnDestroy接口，才能保证Angular正确调用ngOnDestroy钩子。

内容的提问来源于stack exchange，提问作者Robinson Batista da Silva