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 的 link 不起作用，控制台中出现异常。

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

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

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

谢谢，菲利普

Answer 1

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

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

Answer 2

import {Router} from 'angular2/router';

<button (click)="goToParent()">Goto Parent</button>\

export class MyItemsCmp {

  constructor(router:Router){
      this.router=router;
  }

  goToParent()
  {
    this.router.parent.navigate(['/item/new']);
  }

}

Check this example with my routing, it does what you need

Answer 3

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

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

你所要做的就是这样写：

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

在路由器树中退后一步

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

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

Angular 2 add routerLink in child which points to root router

javascript

routing

angular

router

angular2-routing