Angular 2 add routerLink in child which points to

问题:

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.

The router hierarchy is:

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

The involved components are:

@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 {

}

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.

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]

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

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

Thanks, Philipp

回答1:

If you want to change the root route it should be

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

回答2:

RouterOutlet directive during component instantiation creates ChildRouter and injects it as "Router" to it. So components dynamically inserted to RouterOutlet have their own nested routers (with no RouteConfig on them). These routers are like tree leaves.

Thats why it complains that this router host component doesn't have routes configured.

All you have to do is to write it like this:

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

to get one step back in routers tree

(worked for me in Angular 2.0.0-beta.9)

回答3:

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