Angular 2 为带有插座的儿童提供路线答案

【问题标题】：Angular 2 routes children with outletsAngular 2 为带有插座的儿童提供路线
【发布时间】：2017-03-16 08:04:35
【问题描述】：

目前正在尝试了解 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 例外：未捕获（承诺中）：错误：无法匹配任何路由：'full'

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

谁能指出我哪里出错了？

【问题讨论】：

我也有同样的问题...

标签： angular routes angular-routing

【解决方案1】：

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

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

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

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

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

Plunker example

【讨论】：

【解决方案2】：

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

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

【讨论】：