Angular 8：如何在NavigationStart事件中获取纯净目标路由路径

我之前在处理带命名路由出口的Angular项目时也遇到过这个困扰——event.url里混着命名出口的额外信息，根本没法直接用。其实可以借助Angular Router的UrlTree来精准提取主路由的纯净路径，这里给你两种靠谱的实现方式：

方法一：通过UrlTree解析主路由路径（推荐） #

利用router.parseUrl()把导航url转换成结构化的UrlTree对象，然后直接获取主路由出口（默认是primary）对应的路径分段，拼接后就是纯净的目标路径：

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

// 在组件或服务的构造函数注入Router
constructor(private router: Router) {}

ngOnInit(): void {
  this.router.events
    .pipe(filter(event => event instanceof NavigationStart))
    .subscribe((event: NavigationStart) => {
      // 解析导航url为UrlTree对象
      const urlTree: UrlTree = this.router.parseUrl(event.url);
      // 获取主路由出口（默认primary）的路径分段
      const primarySegments = urlTree.root.children['primary']?.segments || [];
      // 拼接成分段路径，为空时返回根路径'/'
      const cleanPath = primarySegments.length 
        ? `/${primarySegments.map(seg => seg.path).join('/')}`
        : '/';

      console.log('纯净的目标路由路径:', cleanPath);
      // 这里就可以用cleanPath做你需要的逻辑了
    });
}

关键说明： #

• urlTree.root.children['primary']对应Angular默认的主路由出口，如果你自定义了主出口名称，记得把'primary'改成你实际的出口名
• 这种方式完全基于Angular Router的官方API，不会因为url格式变化而失效，比手动字符串切割靠谱得多

方法二：手动过滤url中的命名出口片段（不推荐，仅作补充） #

如果你只是临时处理简单场景，也可以用正则表达式去掉url中命名出口的部分（比如(outletName:path)格式的内容）：

this.router.events
  .pipe(filter(event => event instanceof NavigationStart))
  .subscribe((event: NavigationStart) => {
    // 用正则匹配并移除所有命名出口的片段
    const cleanPath = event.url.replace(/\([^)]+\)/g, '').split('?')[0];
    // 处理可能出现的多余斜杠
    const normalizedPath = cleanPath.replace(/\/+/g, '/') || '/';
    console.log('纯净的目标路由路径:', normalizedPath);
  });

注意： #

这种方式依赖url的格式规则，如果Angular后续调整命名出口的url格式，正则就会失效，所以优先推荐第一种方法。

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