Angular 2路线 child 与网点

Question

目前正在尝试了解 Angular 2 路由，但我遇到了一个我无法解决的问题，感觉它是某种语法或配置，我只是缺少它。

我想在一个页面上有两个路由器 socket ，并能够在页面上显示两个单独的部分，用户可以单独导航。

我试着按照这里的代码 - http://onehungrymind.com/named-router-outlets-in-angular-2/

但是，当我这样做时，我收到一条错误消息，提示找不到子路由所在的路由。

代码如下:

路线

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

在完整组件中:

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

我这样导航:

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

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

这给了我以下错误信息:

core.umd.js:5995 EXCEPTION: Uncaught (in promise): Error: Cannot match any routes: 'full'

如果我从子路由中取出导出，我不会收到此错误消息。

谁能指出我哪里出错了？

Answer 1

该组件只需要一个未命名的路由器 socket ，并且可以有额外的命名 socket

<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]);
  }

Plunker example