Angular如何在NavigationEnd事件中获取原始路由路径而非解析后URL

当然可以做到！你不需要依赖event.url返回的解析后URL，而是可以通过Angular Router提供的ActivatedRoute或者路由配置来获取定义时的原始路由路径（比如someList/:id）。下面给你两种可靠的实现方式：

方法一：通过ActivatedRoute遍历路由路径 #

这是最直接且适用于嵌套路由的方式，利用ActivatedRoute的pathFromRoot属性，遍历从根路由到当前激活路由的所有段，拼接每个段的原始配置路径：

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

export class AppComponent {
  constructor(
    private router: Router,
    private activatedRoute: ActivatedRoute
  ) {
    this.router.events
      .pipe(filter(event => event instanceof NavigationEnd))
      .subscribe((event: NavigationEnd) => {
        let rawRoutePath = '';
        
        // 遍历根到当前的所有路由段，拼接原始路径
        this.activatedRoute.pathFromRoot.forEach(routeSegment => {
          if (routeSegment.routeConfig?.path) {
            // 处理拼接时的斜杠，避免重复
            rawRoutePath = rawRoutePath 
              ? `${rawRoutePath}/${routeSegment.routeConfig.path}` 
              : routeSegment.routeConfig.path;
          }
        });

        console.log('原始路由路径:', rawRoutePath); // 输出示例: 'someList/:id'
      });
  }
}

原理说明 #

pathFromRoot会返回一个路由数组，包含从应用根路由到当前激活路由的所有层级路由对象。每个对象的routeConfig.path就是你在路由模块中定义的原始路径（包含:id这类参数占位符），把这些路径段拼接起来就能得到完整的原始路由路径。

方法二：通过路由配置匹配（适用于简单路由场景） #

如果你不需要处理复杂的嵌套路由，也可以直接从Router的配置中查找匹配当前URL的路由项：

// 在NavigationEnd的订阅回调中添加以下逻辑
const urlTree = this.router.parseUrl(event.url);
const matchedRoute = this.router.config.find(route => {
  // 检查路由是否激活，且生成的URL树与当前URL匹配
  return this.router.isActive(route.path, false) &&
         this.router.createUrlTree([route.path]).toString() === urlTree.root.children['primary']?.toString();
});

if (matchedRoute) {
  console.log('匹配到的原始路由:', matchedRoute.path);
}

注意事项 #

• 这种方式更适合非嵌套的简单路由，对于多层嵌套路由，需要递归遍历路由配置的children属性才能准确匹配。
• 如果你的路由存在重定向、通配符或别名，建议优先使用方法一，因为它直接基于当前激活的路由状态，准确性更高。

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