代码之家 › 专栏 › 技术社区 › Varun Sukheja

角度:开始时的路由参数

angular-router angular-routing angular

Varun Sukheja · 技术社区 · 7 年前

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

但是上面的url 123(id)是可选的,所以下面的url也是有效的 http://localhost:4200/page1/page/2/page3

我试着像处理第一页组件一样

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

因为我必须在这里定义2条路由,同样地,如果我选择其他组件路由,我需要为每个组件提供2条路由。

所以有聪明的方法来处理这个问题吗?

1 回复 | 直到 7 年前

Mukyuu 7 年前

看起来不像。已经够好了。您需要为从路由访问的两种可能方式定义两条路径。

来源 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

推荐文章

j-p · 角度5,使用子模块中的组件

8 年前

Felipe Micali · 输入父管线角度5时导航到上次访问的子管线

8 年前

Matt Eland · 角度2+-我可以发出一个指令来使用路由器导航吗?

8 年前

Burst of Ice · 未找到直接浏览时的角度布线

8 年前

Wai Yan Hein · 子模块的角度5布线不工作

8 年前

Plochie · SVG模式在Safari中不起作用

8 年前

Sathya V · 路线导航时角度组件属性未重置

8 年前

Mujahid · 角度路由器中的Scrollspy效应

8 年前

Musical Coder · URL更改不以角度触发

8 年前

JSON · 如何将子组件设置为路由器出口的默认路由?[副本]

8 年前