Angular 2可选路由参数

是否可以在Angular 2路线中有一个可选的路线参数？我在RouteConfig中尝试了Angular 1.x语法但收到了以下错误:

"ORIGINAL EXCEPTION:Path"/ user /:id？"包含"？",这在路由配置中是不允许的."

@RouteConfig([
{
    path: '/user/:id?',
    component: User,
    as: 'User'
}])

小智.. 251

您可以使用和不使用参数定义多个路由:

@RouteConfig([
    { path: '/user/:id', component: User, name: 'User' },
    { path: '/user', component: User, name: 'Usernew' }
])

并处理组件中的可选参数:

constructor(params: RouteParams) {
    var paramId = params.get("id");

    if (paramId) {
        ...
    }
}

另请参阅相关的github问题:https://github.com/angular/angular/issues/3525

1> 小智..：

---

您可以使用和不使用参数定义多个路由:

@RouteConfig([
    { path: '/user/:id', component: User, name: 'User' },
    { path: '/user', component: User, name: 'Usernew' }
])

并处理组件中的可选参数:

constructor(params: RouteParams) {
    var paramId = params.get("id");

    if (paramId) {
        ...
    }
}

另请参阅相关的github问题:https://github.com/angular/angular/issues/3525

---

旧的但这种方法的一个主要问题是每条路线都被视为唯一路线,它使组件重用变得不可能.

---

如果我错了,请纠正我,但只有当数组中的路由顺序颠倒时,这个解决方案才适用于我,即参数的路由发生在另一个之前.在我这样做之前,路由器只匹配没有参数的路由.

---

这个解决方案仍然适用吗？我注意到从"User"移动到"UserNew"将重新实例化"User"组件

---

如@teleaziz所述,追加参数将重新渲染组件.为了避免这种情况,Martin Cremer的回答; 添加一个带有空白参数值的'redirectTo'根,对我来说非常有用:/sf/ask/17360801/ - 但这非常hacky,我认为他们应该只是正确支持可选的路由参数.

---

对于那些想知道为什么`RouteParams`不能导入到组件的人，请检查：/sf/ask/17360801/。解决方法是使用`ActivatedRoute`：`route.snapshot.params ['routeParam']`

2> Martin Creme..：

---

{path: 'users', redirectTo: 'users/'},
{path: 'users/:userId', component: UserComponent}

这样,添加参数时不会重新呈现组件.

---

这个答案是最好的。它不会重新渲染相同的组件，并且不需要多个组件。

---

最好的答案,但我添加了`pathMatch:'full'`来重定向,否则像`users/admin`这样的路径也会重定向到我的情况

3> Jp_..：

---

当信息是可选的时,建议使用查询参数.

路由参数或查询参数？

没有严格的规则.一般来说,

更喜欢路线参数

该值是必需的.

该值是区分一条路径与另一条路径的必要条件.

更喜欢查询参数

该值是可选的.

值是复杂的和/或多变量的.

来自https://angular.io/guide/router#optional-route-parameters

您只需要从路径路径中取出参数.

@RouteConfig([
{
    path: '/user/',
    component: User,
    as: 'User'
}])

---

更改可选路由参数会重新呈现组件,但更改queryParams则不会.此外,如果您在路线导航之前解决某些数据,则每次更改可选路线参数时都会请求它.

4> ObjectiveTC..：

---

Angular 4 - 解决可选参数排序的解决方案:

做这个:

const appRoutes: Routes = [
  {path: '', component: HomeComponent},
  {path: 'products', component: ProductsComponent},
  {path: 'products/:id', component: ProductsComponent}
]

请注意,products和products/:id路由的名称完全相同.products对于没有参数的路径,Angular 4将正确跟随,如果参数将遵循products/:id.

然而,对于非参数路由路径products必须不能有斜线,否则角度将错误地把它当作一个参数路径.所以在我的情况下,我有产品的尾部斜线,它没有工作.

不要这样做:

...
{path: 'products/', component: ProductsComponent},
{path: 'products/:id', component: ProductsComponent},
...

---

请记住,您也可以将"数据"传递给组件,即使对于同一组件,每条路径也可能不同.示例`{path:'products',component:ProductsComponent,data:{showAllProducts:true}},`可以使用`然后检查`showAllProducts`.稍微好一点,然后检查null,但对于更简单的情况,或许可能没问题.

5> matewka..：

---

rerezz的答案非常好,但它有一个严重的缺陷.它导致User组件重新运行该ngOnInit方法.

当你在那里做一些沉重的东西并且当你从非参数路径切换到参数路径时不希望它重新运行时,它可能会有问题.虽然这两条路线都是为了模仿一个可选的url参数,但不是两条不同的路由.

以下是我建议解决问题的方法:

const routes = [
  {
    path: '/user',
    component: User,
    children: [
      { path: ':id', component: UserWithParam, name: 'Usernew' }
    ]
  }
];

然后,您可以将负责处理param的逻辑移动到UserWithParam组件,并将基本逻辑保留在User组件中.User::ngOnInit当您从/ user导航到/ user/123时,无论您执行什么操作都不会再次运行.

别忘了把它放在User模板中.