Angular 2在指向根路由器的子节点中添加routerLink

Question

目前我正在使用 Angular 2 Beta 8 开发一个网络应用程序。现在我在使用 routerLink 指令时遇到了嵌套路由的问题。

路由器层次结构是：

 AppCmp
|-> NewItemFormCmp
|-> UserDashboardCmp
    |-> MyItemsCmp

涉及的组件是：

 @Component({
    ...
})
@RouteConfig([
    {component: NewItemFormCmp, name: 'NewItemForm', path: '/item/new'},
    {component: UserDashboardCmp, name: 'UserDashboardCmp', path: '/me/...', useAsDefault: true}
])
export class AppCmp {

}

@Component({
    ...
})
@RouteConfig([
    {component: MyItemsCmp, name: 'MyItemsCmp', path: '/items', useAsDefault: true}
])
export class UserDashboardCmp {

}

@Component({
    template: `
        ...
           a([routerLink]='["NewItemForm"]'
        ...
    `
})
export class MyItemsCmp {

}

到 MyItemsCmp 的嵌套路由工作得很好。现在我想在 MyItemsCmp 中实现一个按钮，以使用组件模板中所示的 routerLink 指令导航到 NewItemFormCmp。

加载组件“MyItemsCmp”时，模板的所有元素都会在浏览器中呈现。但是 NewItemFormCmp 的链接不起作用，控制台中出现异常。

 Uncaught EXCEPTION: Component "MyItemsCmp" has no route config. in [["NewItemForm"] in MyItemsCmp@x:xxx]

在构造函数中注入路由器时，我可以导航到 RootUser 并使用“导航”导航到给定的路由。

如何使用 RouterLink 指令从二级子组件导航到一级子组件？

谢谢，菲利普

原文由 PS1290 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果你想改变根路由，它应该是

 <a[routerLink]='["/NewItemForm"]'

原文由 Günter Zöchbauer 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

组件实例化期间的 RouterOutlet 指令创建 ChildRouter 并将其作为“路由器”注入它。因此动态插入到 RouterOutlet 的组件有它们自己的嵌套路由器（它们上面没有 RouteConfig）。这些路由器就像树叶。

这就是为什么它抱怨这个路由器主机组件没有配置路由。

你所要做的就是这样写：

<a [routerLink]="['../NewItemForm']">

在路由器树中退后一步

（在 Angular 2.0.0-beta.9 中为我工作）

原文由 Pio 发布，翻译遵循 CC BY-SA 3.0 许可协议