Angular 2 guides kids with exits

Question

We are currently trying to find out about Angular 2 routing, and I ran into a problem that I cannot solve, it looks like it is some kind of syntax or config that is simply missing.

I want to have two router outputs on one page and be able to display two separate sections on a separate page, which the user can implement individually.

I tried to execute the code here - http://onehungrymind.com/named-router-outlets-in-angular-2/

However, when I do this, I get an error message indicating that it cannot find the route that the child routes are routed to.

Here is the code:

Routes

{
    path: 'full',
    component: FullComponent,
    children: [
        {
            path: 'list',
            component: ListComponent,
            outlet: 'list'
        }
    ]
}

In full force:

<div divOne>
    <router-outlet name="list"></router-outlet>
</div>
<div divTwo>
    <router-outlet name="detail"></router-outlet>
</div>

And I move as follows:

    let navigationExtras: any = {
        queryParams: { reference: 21 },
        outlets: {'list': ['list']}
    };

    this.router.navigate( ['full'], navigationExtras);

This gives me the following error message:

core.umd.js: 5995 : ( ): : : ""

, .

- , ?

Answer 1

-

<router-outlet></router-outlet>
<router-outlet name="full"></router-outlet>

this.router.navigate( ['full'], navigationExtras);

navigate ([{outlets: {route3: 'productPage'}}]);

  navigate() {
    let navigationExtras: any = {
      queryParams: { reference: 21 },
      outlets: {full: 'full']}
    };
    this.router.navigate([navigationExtras]);
  }

Answer 2

router.navigate ['/full'] ['full'].

this.router.navigate(['/full'], navigationExtras);