Angular 2路线儿童出口

时间:2016-11-02 20:55:09

标签: angular routes angular-routing

目前正在尝试了解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:未捕获(承诺):错误:无法匹配任何路线:&#39;完整&#39;

如果我从儿童路线中取出插座,我不会收到此错误消息。

有谁可以指出我哪里出错?

2 个答案:

答案 0 :(得分:6)

该组件只需要一个未命名的路由器插座,并且可以有其他命名插座

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

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

导航([{outlets:{route3:&#39; productPage&#39;}}]);

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

ConstantInputDStream

答案 1 :(得分:1)

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

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