Angular 2 路由 - 路由器 RC3答案

【问题标题】：Angular 2 Routing - Router RC3Angular 2 路由 - 路由器 RC3
【发布时间】：2016-07-15 16:31:36
【问题描述】：

我在得到一个 id 后尝试使用 routerLink 导航到一个页面，我可以得到它。

问题是链接显示为“/page;id=10/component”。我希望它显示为 '/page/10/component' （不是矩阵表示法 - 没有 ';id=' ）

在我的 app.routes.ts 中：

@RouterConfig = [
    { path: 'page/:id/component', component: MyComponent, data: {id: 'item.id'} }
];

在我的页面中：

<a [routerLink]="['page', {id: item.id}, 'component']">

我正在使用最新的 Angular 2 路由器组件（RC3 Beta 2）。

有人知道我做错了什么吗？提前致谢。

【问题讨论】：

【解决方案1】：

这应该是：

<a [routerLink]="['page', {'id': item.id}, 'component']">

代替：

<a [routerLink]="['/page', item.id, 'component']">

【讨论】：

【解决方案2】：

试试这个

<a [routerLink]="['page', item?.id, 'component']">

【讨论】：

谢谢。也试过了，但得到一个“无法读取属性 'toString' of undefined '错误，可能指的是 'item'。我通过服务获取项目并在页面的其他位置显示它的另一个属性。
尝试按照我更新的答案中的建议添加 elvis 运算符
啊，它说 toString 有误。这不应该出现在路由器链接上。您可以检查链接，它应该正确形成。您需要确保这可能来自您要路由到的组件。
还在提供路由器中设置 enableTracing true 以查看它在什么导航状态下失败 provideRouter(....,{enableTracing:true})

【解决方案3】：

据我所知，这个路由配置不起作用：

{ path: 'page/:id/component', component: MyComponent, data: {id: 'item.id'} }

我认为你真正需要问的是最后的'/component' 是否必要。如果是，您可能需要考虑添加child route。

另一种选择是更改路线的顺序，改用page/component/:id。我相信 routerlink 指令会将您的 URL 搜索参数附加到路由的末尾，所以这应该可以工作。

同样，最简单的解决方案是从路由配置中删除 '/component'。

【讨论】：