Angular如何获取路由的参数化模板路径而非当前URL？

问题描述 #

在Angular里我知道可以用this.router.url获取当前URL，但我现在需要拿到路由的参数化模板路径。我的forum.routes.ts路由配置如下：

const routes: Routes = [
  {
    path: '',
    component: ForumComponent,
    data: { breadcrumb: 'Forum' },
    children: [
      {
        path: '',
        component: ForumListComponent,
      },
      {
        path: ':forum',
        children: [
          {
            path: '',
            component: DiscussionsComponent,
            data: { breadcrumb: 'Forum name' },
          },
          {
            path: 'discussion',
            children: [
              {
                path: 'nouvelle',
                component: NewDiscussionComponent,
                data: { breadcrumb: 'Nouvelle discussion' },
              },
              {
                path: ':discussionId/:discussionTitle',
                component: DiscussionComponent,
                data: { breadcrumb: 'Discussion name' },
              },
            ],
          },
        ],
      },
    ],
  },
];

比如当前路由是/forum/politique/discussion/87/abcd（对应DiscussionComponent），我希望得到的是/forum/:forum/discussion/:discussionId/:discussionTitle这种模板路径，而不是实际的URL，请问有没有办法实现？

解决方法 #

可以通过ActivatedRoute遍历当前路由的快照树，把每一级的配置路径拼接起来，就能得到参数化的模板路径。

具体实现：

1. 先在组件中注入ActivatedRoute服务：

import { ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute) {}

2. 写一个递归/循环函数，遍历路由快照的所有父节点，收集每一级的路径配置：

getRouteTemplatePath(route: ActivatedRoute): string {
  const pathSegments: string[] = [];
  // 从当前路由往上遍历所有父级路由
  let currentRoute = route;
  while (currentRoute) {
    const routePath = currentRoute.snapshot.routeConfig?.path;
    if (routePath) {
      pathSegments.push(routePath);
    }
    currentRoute = currentRoute.parent!;
  }
  // 反转数组得到从根到子的路径顺序，再拼接成完整路径
  return '/' + pathSegments.reverse().join('/');
}

3. 在组件初始化或需要的地方调用该方法：

ngOnInit(): void {
  // 获取当前路由的模板路径（不带forum前缀）
  const moduleTemplatePath = this.getRouteTemplatePath(this.route);
  // 拼接根模块的forum前缀，得到最终需要的路径
  const fullTemplatePath = '/forum' + moduleTemplatePath;
  
  console.log(fullTemplatePath); 
  // 输出结果：/forum/:forum/discussion/:discussionId/:discussionTitle
}

说明：

• 这个方法会完整遍历当前路由的所有层级，把配置中定义的参数化路径（比如:forum、:discussionId）原封不动拼接起来。
• 因为你的路由配置是放在forum模块下的，模块加载时已经带了path: 'forum'的前缀，所以最后手动拼接这个前缀就能得到完整的模板路径。

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