如何通过Angular原生Observable追踪location.go/replaceState引发的URL变更？

核心结论 #

Angular没有原生Observable可以直接订阅来追踪location.go()或location.replaceState()触发的URL变化。这两个方法直接操作浏览器历史栈，完全绕过了Angular路由器的生命周期，不会触发任何路由器相关事件，Angular也没有内置服务专门暴露这类手动URL修改的Observable。

为什么自定义封装是必要的？ #

目前最可靠的方案就是封装原生Location服务，拦截go()和replaceState()的调用，在执行原逻辑的同时推送URL变化事件。示例实现如下：

import { Injectable } from '@angular/core';
import { Location } from '@angular/common';
import { BehaviorSubject, Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class SubscribableLocationService {
  private readonly _currentUrl$ = new BehaviorSubject<string>(this.location.path());

  constructor(private readonly location: Location) {}

  // 对外暴露可订阅的URL Observable
  get currentUrl$(): Observable<string> {
    return this._currentUrl$.asObservable();
  }

  // 重写go方法，触发事件推送
  go(path: string, query?: string): void {
    this.location.go(path, query);
    this._currentUrl$.next(this.location.path());
  }

  // 重写replaceState方法，触发事件推送
  replaceState(path: string, query?: string): void {
    this.location.replaceState(path, query);
    this._currentUrl$.next(this.location.path());
  }

  // 保留原生Location服务的其他方法
  path(): string {
    return this.location.path();
  }

  back(): void {
    this.location.back();
  }
}

使用时只需在组件/服务中注入SubscribableLocationService，调用其go()/replaceState()方法修改URL，并通过currentUrl$订阅变化即可。

有没有替代方案？ #

监听window.popstate事件是常见的URL变化监听方式，但它仅在用户点击浏览器前进/后退按钮时触发，不会响应location.go()或replaceState()的主动调用，无法覆盖你的需求场景。

总结 #

如果必须追踪这类手动修改URL的操作，自定义封装Location服务是目前唯一可行的Angular友好方案，没有更直接的原生特性可以替代。

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