Angular 15路由：完成新发票后如何带参数跳转至展示路由

这个场景完全可行，Angular 15的路由系统原生支持这种带动态参数的路由跳转需求，以下是具体实现方法和相关说明：

一、核心实现方法 #

1. 使用 Router 服务的 navigate()（推荐） #

通过ActivatedRoute获取当前路由的customerId参数，结合新生成的invoiceId，用相对路由的方式跳转：

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

constructor(
  private router: Router,
  private activatedRoute: ActivatedRoute
) {}

// 保存发票后调用此方法，传入新获取的invoiceId
goToInvoiceDetail(invoiceId: number) {
  const customerId = this.activatedRoute.snapshot.paramMap.get('customerId');
  // 基于当前路由向上跳转一级，再拼接目标路径
  this.router.navigate(
    ['../', customerId, 'showInvoice', invoiceId],
    { relativeTo: this.activatedRoute }
  );
}

• relativeTo: this.activatedRoute确保导航是相对于当前组件的路由层级
• ../用于回到customer/:customerId层级，避免硬编码完整路径

2. 使用 navigateByUrl() 直接跳转 #

如果明确知道完整路径结构，可以直接构造URL字符串跳转：

goToInvoiceDetail(invoiceId: number) {
  const customerId = this.activatedRoute.snapshot.paramMap.get('customerId');
  const targetUrl = `../customer/${customerId}/showInvoice/${invoiceId}`;
  this.router.navigateByUrl(targetUrl);
}

3. 模板中直接用 routerLink #

如果跳转触发在模板（比如按钮点击），可以直接绑定routerLink：

<!-- 组件类需提前获取customerId和invoiceId，并注入ActivatedRoute为route变量 -->
<button 
  [routerLink]="['../', customerId, 'showInvoice', invoiceId]"
  [relativeTo]="route"
>
  查看刚创建的发票
</button>

二、关于 LocalStrategy 的说明 #

Angular中没有内置的LocalStrategy服务，你可能混淆了LocationStrategy——这是控制URL表现形式的底层服务（比如哈希模式或HTML5路径模式），它不直接负责路由导航逻辑。导航操作仍需通过Router服务完成，LocationStrategy仅用于配置路由的URL规则。

三、路由配置验证 #

确保你的路由模块中正确配置了层级结构，示例如下：

const routes: Routes = [
  // 其他路由...
  {
    path: 'customer/:customerId',
    children: [
      { path: 'showInvoice/:invoiceId', component: ShowInvoiceComponent },
      { path: 'newInvoice/:customerId', component: NewInvoiceComponent }
    ]
  }
];

内容的提问来源于stack exchange，提问作者R. Nourmandi