如何在Angular RxJS中响应式订阅URL变化并获取URL

问题原因 #

你之前使用ActivatedRoute.queryParams监听，仅能捕获查询参数变化，无法覆盖以下场景：

• 路由路径变化但无参数（如从/home跳转到/products）
• 同路径下从带参数变为无参数（如从/products?name=xxx跳转到/products）

这些场景下queryParams不会触发订阅，导致文本框无法更新。

修复方案 #

改用Router的events事件流，过滤出导航完成事件（NavigationEnd），该事件会在每次路由跳转完成后触发，覆盖所有URL变化场景。

修改后的代码

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

// 组件类中
url$ = this.router.events.pipe(
  // 只保留导航完成的事件
  filter(event => event instanceof NavigationEnd),
  map(() => {
    console.log("router.url=" + this.router.url);
    // 返回去掉参数的路径，若需要完整URL直接返回this.router.url即可
    return this.router.url.split('?')[0];
  })
);

模板绑定（保持不变）

在模板中通过async管道绑定到文本框：

<input type="text" [value]="url$ | async">

代码说明 #

1. NavigationEnd：Angular路由事件中唯一代表导航成功完成的事件，确保此时URL已完全更新
2. filter操作符：过滤掉其他无关路由事件（如导航开始、路由守卫等）
3. 直接通过this.router.url获取当前完整URL，无需依赖ActivatedRoute

内容的提问来源于stack exchange，提问作者sam sergiy klok