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条路径，以从路由访问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

角度：开始时的路线参数

1 个答案: