路由angular2时的可选参数[重复]答案

【问题标题】：Optional Parameters While Routing angular2 [duplicate]路由angular2时的可选参数[重复]
【发布时间】：2016-07-06 01:14:36
【问题描述】：

如何在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/

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

i have also tried without defining parameters like this

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

但是如果 xyz 的值为 1 则会引发错误，它将 1 转换为 true

【问题讨论】：

你都试过了吗？
是的，但不工作。
为什么在/abc之前使用...语法？
我在没有... 语法的情况下进行了测试，一切正常。
它的 .. 不是 ... 这是因为我根据需要使用了子路由而不是根目录

标签： routing angular routeparams

【解决方案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']">

【讨论】：

已经试过这个不行
顺便说一下，as 已更改为 name
感谢提醒，已更新！！
但是为什么呢？什么错误？
错误，如问题中所述。刷新时窗口上不显示任何内容

【解决方案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

【讨论】：

已经试过这个不行
顺便说一下，as 已更改为 name
我想你现在应该看看给你的问题。
是的，又一次看到了这个问题：p 对于以前的评论，请参阅此更新stackoverflow.com/a/33196880/5043867
是的，我的错误是将as 更改为name。