Angular 2在指向根路由器的子节点中添加routerLink [英] Angular 2 add routerLink in child which points to root router

问题描述

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

Currently I am developing a web app using Angular 2 Beta 8. Now I am facing a problem with nested routes when using the routerLink directive.

路由器层次结构是:

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.

The nested routing to the MyItemsCmp works perfectly fine. Now I would like to implement a button in the MyItemsCmp to navigate to the NewItemFormCmp by using the routerLink directive as shown in the component's template.

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

When the Component 'MyItemsCmp' is loaded, all elements of the template are rendered in the browser. But the link to the NewItemFormCmp is not working and there is an exception in the console.

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

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

When injecting the router in the constructor, I can navigate to the RootUser and navigate to the given route using "navigate".

如何使用 RouterLink 指令从 2 级子组件导航到 1 级子组件?

How can I navigate from a 2nd level child component to a 1st level child using the RouterLink directive?

谢谢，菲利普

推荐答案

如果要更改根路由应该是

If you want to change the root route it should be

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

这篇关于Angular 2在指向根路由器的子节点中添加routerLink的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！