Angular2 routerLink 参数答案

【问题标题】：Angular2 routerLink paramsAngular2 routerLink 参数
【发布时间】：2016-10-29 10:25:31
【问题描述】：

我的 angular2 应用有这个路由配置

export const AppRoutes: Routes = [
{ path: 'SignIn', component: LoginComponent },
{
    path: 'Home', component: HomeComponent, canActivate: [LoggedInGuard]
    , children: [
        { path: 'ViewUserDetails/:pageTitle', component: ViewUserDetailsComponent },
    ]
}];

我想在我的组件中使用 pageTitle 参数，所以我以这种方式在 routerLink 中传递它

<a [routerLink]="['/Home/ViewUserDetails',{pageTitle:'View Channel User'}]">View Channel User</a>

但是我得到了这个错误

core.umd.js:3257 异常：未捕获（承诺中）：错误：无法匹配任何路线。网址段： 'Home/ViewUserDetails;pageTitle=View%20Channel%20User'

角度文档使用它来传递参数我不明白为什么它会产生这种形式的链接而不是

/Home/ViewUserDetails/View%20Channel%20User

【问题讨论】：

试试<a [routerLink]="['/Home/ViewUserDetails','View Channel User']">View Channel User</a>
非常感谢@HarryNinh

标签： javascript angular routing

【解决方案1】：

Angular 2 路由器确实在 URL 片段基础上工作。它基于 URL pattern 在路由之间导航。

你应该只有一个表达式数组（这里是它的字符串）。

<a [routerLink]="['/Home/ViewUserDetails','View Channel User']">View Channel User</a>

【讨论】：

感谢工作。但我不明白以这种方式在这里使用对象意味着什么 {pageTitle:'View Channel User'}
@YassmeenMahmoud 我想知道你不明白的地方，我很乐意解释一下。
我不知道什么时候使用这个<a [routerLink]="['/crisis-center', { foo: 'foo' }]">Crisis Center</a>，在角度文档here的例子中提到过
@YassmeenMahmoud 只有在你想传递可选参数时才应该这样做，这在路由中没有提到