Angular：开始时的路线参数

Question

我想做一个像http://localhost:4200/1234/page1/page/2/page3等路线。

但在上面的url 123（id）是可选的，所以在url下面也是有效的http://localhost:4200/page1/page/2/page3

我尝试将第1页组件处理为

  const routes: Routes = [
      { path: ':id/page1', pathMatch: 'full', component: Page1Component },
      { path: 'page1', pathMatch: 'full', component: Page1Component }
    ];

因为我必须在这里定义2条路线，类似地，如果我去其他组件路线，我需要为每个组件提供2条路线。

那么有一种聪明的方法可以解决这个问题。

Answer 1

看起来不像。这够好了。您需要为从路径访问的两种可能方式定义2个路径。

资料来源：Angular Router Series: Secondary Outlets Primer，The Powerful URL Matching Engine of Angular Router

---

更新：

或者，我能想到的更好的选择之一就是使用NavigationExtras#state

在发件人组件上需要额外的import { NavigationExtras } from '@angular/router';，并且：

const navigationExtras: NavigationExtras = { state: { id: this.datatobepassed } };
this.router.navigate(['test'], navigationExtras);

发送数据。

在接收器组件上：

const navigation = this.router.getCurrentNavigation();
const state = navigation.extras.state as {id: number};
this.example = state.id;

接收数据。

请参阅以下Stackblitz Demo