路由angular2时的可选参数

Question

如何在angular2.my路由配置的路由中定义可选参数，如下所示：

<a [routerLink]="['../abc',{xyz: blabla}]">
     and 
<a [routerLink]="['../abc']">

{ path: '/abc/:xyz', component: abc, name: 'abc' },  // Here i want xyz as optional perameter

所以问题是每当我使用带有参数 blabla 的第一种方法时它工作正常，因为在路由时我已经定义了参数 xyz 但是在第二种方法的情况下我不想发送参数所以 URL 变成

http://localhost:8080/#/sideNav/abc/

这是第一次很好，但刷新页面后没有显示整个 window 变得空白，没有任何内容。那么有没有什么方法可以在angular2中路由时提供可选参数。

i have also tried without defining parameters like this

{ path: '/abc', component: abc, name: 'abc' }

但是如果 xyz 的值为 1 它将抛出错误，它将 1 转换为 true

Answer 1

您可以定义多个具有相同组件的带参数和不带参数的路由：

@RouteConfig([{
  path: '/abc',
  component: Abc,
  name: 'abc'},
{
  path: '/abc/:xyz',
  component: Abc,
  name: 'abcXyz'
}])

然后使用你需要的

<a [routerLink]="['/abcXyz',{xyz: blabla}]">
     and 
<a [routerLink]="['/abc']">

如果 routeCongig 位于您的根文件中，请在根文件名前使用 /，如果它在第二层或其他位置，请使用

<a [routerLink]="['/parentRoot', {parentParams:value}, '/abc']">

Answer 2

你可以把两者放在一起，

@RouteConfig([
    { path: '/abc/:xyz', component: Abc,  name: 'abc' }
    { path: '/abc', component: Abc, name: 'abc' },
])

如果这没有按预期工作，您应该在下面看到，

Optional routeparams #3525
https://github.com/angular/angular/issues/3525

路由angular2时的可选参数

Optional Parameters While Routing angular2

routing

routeparams

angular