Angular中获取回退页面操作及清除历史页面数据方法

一、监听浏览器回退按钮操作 #

浏览器回退按钮触发的是popstate事件，在Angular里可以通过两种方式监听：

方法1：用HostListener监听全局事件

在目标页面的组件中添加代码，直接监听window的回退事件：

import { HostListener } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-target-page',
  templateUrl: './target-page.component.html'
})
export class TargetPageComponent {
  constructor(private router: Router) {}

  // 监听浏览器回退动作
  @HostListener('window:popstate', ['$event'])
  onBrowserBack(event: PopStateEvent) {
    // 回退触发时执行数据清除逻辑
    this.clearPreviousPageData();
  }

  // 清除过往页面数据的方法
  private clearPreviousPageData() {
    // 1. 清空路由状态数据（如果之前页面通过路由传递了状态）
    this.router.navigate([], { replaceUrl: true, state: {} });
    
    // 2. 清除组件内临时数据（根据业务场景修改）
    // this.userFormData = null;
    // this.pageCache = {};

    // 3. 清除本地/会话存储中的过往页面数据
    // localStorage.removeItem('previousPageData');
    // sessionStorage.clear();
  }
}

方法2：用Angular的Location服务监听

通过Location的订阅方法监听回退动作，注意组件销毁时取消订阅避免内存泄漏：

import { Location } from '@angular/common';
import { Subscription } from 'rxjs';
import { Router } from '@angular/router';

@Component({
  selector: 'app-target-page',
  templateUrl: './target-page.component.html'
})
export class TargetPageComponent {
  private backSub: Subscription;

  constructor(private location: Location, private router: Router) {}

  ngOnInit() {
    // 订阅回退事件
    this.backSub = this.location.subscribe(() => {
      this.clearPreviousPageData();
    });
  }

  ngOnDestroy() {
    // 组件销毁时取消订阅
    this.backSub.unsubscribe();
  }

  private clearPreviousPageData() {
    // 同上面的清除逻辑，按需调整
  }
}

二、访问特定页面时自动清除过往数据 #

如果希望用户刚进入特定页面就清除之前的页面数据，直接在组件的ngOnInit钩子中执行清除逻辑：

ngOnInit() {
  // 进入页面时立即清除过往数据
  this.clearPreviousPageData();
}

要是需要彻底清除路由历史（让用户无法回退到直接上一页），可以在跳转到该页面时添加replaceUrl: true：

// 在跳转的组件中使用此代码
this.router.navigate(['/target-page'], { replaceUrl: true });

这会用当前页面替换路由历史中的上一条记录，配合数据清除逻辑就能满足需求。

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