Angular 2用outlet来路由子节点

Question

目前正在学习Angular 2的路由，我遇到了一个我无法解决的问题，感觉好像是我缺少了某种语法或配置。

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

我试着从这里遵循代码- 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

组件只需要一个未命名的路由出口，并且可以有其他已命名的出口

<router-outlet></router-outlet>
<router-outlet name="full"></router-outlet>
this.router.navigate( ['full'], navigationExtras);

导航([{网点:{route3:‘productPage}}]);

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

<<p> 恰好例子/strong>

Answer 2

router.navigate方法的第一个参数应该是['/full']而不是['full']。

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