Angular Router如何获取指定路由的完整URL？

可以通过Angular的Router和Location服务组合实现，无需触发导航就能生成对应路由的完整绝对URL，具体实现如下：

实现步骤 #

1. 注入所需服务
   在组件中导入并注入Router、Location以及APP_BASE_HREF（用于获取应用部署的基础路径）：

   import { Router, APP_BASE_HREF } from '@angular/router';
   import { Location } from '@angular/common';
   import { Inject, Component } from '@angular/core';
   
   @Component({
     selector: 'app-my-component',
     templateUrl: './my-component.component.html'
   })
   export class MyComponent {
     constructor(
       private router: Router,
       private location: Location,
       @Inject(APP_BASE_HREF) private baseHref: string
     ) {}
   }
   

2. 编写生成URL的方法
   利用createUrlTree构建路由结构，serializeUrl转换为路径字符串，再结合域名和基础路径拼接成完整URL：

   getFullRouteUrl(routePath: string | string[]): string {
     // 创建路由树，支持传入带参数的路由数组（如['/user', 123]）
     const urlTree = this.router.createUrlTree(routePath);
     // 序列化路由树为相对路径字符串
     const serializedPath = this.router.serializeUrl(urlTree);
     // 拼接域名、处理后的路径，得到完整绝对URL
     return `${this.location.origin}${this.location.prepareExternalUrl(serializedPath)}`;
   }
   

3. 调用方法获取目标URL
   以获取my-route-1的完整URL为例：

   const fullUrl = this.getFullRouteUrl(['/my-route-1']);
   // 返回结果：https://www.somewebsite.com/some-path/my-app/my-route-1
   

关键说明 #

• createUrlTree：仅构建路由的抽象结构，不会触发页面导航
• serializeUrl：将路由树转换为可识别的路径字符串
• Location.prepareExternalUrl：自动适配应用部署的baseHref配置，确保路径匹配部署的子目录（如/some-path/my-app/）
• 若路由包含参数，直接传入参数数组即可，例如['/user', 456]会生成/user/456对应的完整URL

注意事项 #

部署应用时需正确设置baseHref：

• 构建时通过命令行指定：ng build --base-href /some-path/my-app/
• 或在index.html中设置<base href="/some-path/my-app/">

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