Angular中pushState修改URL后如何正确监听popstate事件

首先明确一个原生JS的基础规则：window.history.pushState() 和 history.replaceState() 被调用时不会触发popstate事件。popstate事件仅在浏览器历史栈发生切换时才会派发，对应场景只有：

• 用户点击浏览器的前进/后退按钮
• 代码主动调用history.back()、history.forward()、history.go()方法

你现在点击链接时是主动调用pushState修改URL，这个操作本身就不会触发popstate，不管是用原生addEventListener还是Angular的@HostListener绑定，都收不到事件回调，和Angular的写法没有关系。

根据你的需求场景选对应方案即可：

方案1：单次跳转后直接执行逻辑 #

如果只需要在你这个链接点击触发URL更新后跑自定义逻辑，不需要全局监听所有URL变化，直接在pushState调用后执行逻辑就行，是最简单的写法：

createCustomUrl(e: Event, object: any, title: string, url: string): void {
  e.preventDefault();
  window.history.pushState(object, title, url);
  // 直接在这里执行URL变更后的自定义逻辑
  console.log('Do something');
}

方案2：全局监听所有URL变更 #

如果你需要捕获所有URL变化，包括主动pushState/replaceState、用户点击前进后退的场景，按以下方式实现：

1. 重写原生history.pushState和history.replaceState方法，调用时手动派发自定义事件，覆盖主动改URL的场景
2. 同时监听原生popstate事件，覆盖浏览器前进后退的场景

可以在Angular的根组件（AppComponent）里注册全局监听，参考代码：

import { Component, HostListener, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  ngOnInit(): void {
    // 重写pushState方法
    const originalPushState = window.history.pushState;
    window.history.pushState = function(...args) {
      const result = originalPushState.apply(this, args);
      window.dispatchEvent(new Event('custom:urlchange'));
      return result;
    };

    // 重写replaceState方法
    const originalReplaceState = window.history.replaceState;
    window.history.replaceState = function(...args) {
      const result = originalReplaceState.apply(this, args);
      window.dispatchEvent(new Event('custom:urlchange'));
      return result;
    };
  }

  // 监听前进/后退触发的popstate事件
  @HostListener('window:popstate')
  onPopState() {
    this.handleUrlChange();
  }

  // 监听主动修改URL触发的自定义事件
  @HostListener('window:custom:urlchange')
  onCustomUrlChange() {
    this.handleUrlChange();
  }

  private handleUrlChange() {
    // 统一写URL变更后要执行的逻辑
    console.log('URL变更，当前路径：', window.location.pathname);
  }
}

方案3：使用Angular Router自带的事件监听 #

如果你的项目是通过Angular Router模块做路由跳转，更推荐直接用框架提供的路由事件API，不需要手动操作原生history对象：

import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';

// 构造函数注入Router
constructor(private router: Router) {
  this.router.events.pipe(
    filter(event => event instanceof NavigationEnd)
  ).subscribe((event: NavigationEnd) => {
    console.log('跳转完成，当前URL：', event.url);
    // 执行自定义逻辑
  });
}

注意这个方案只能监听到通过Angular Router触发的跳转，你手动调用原生history.pushState改URL的操作不会触发路由事件。

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