Angular 2条路线儿童有网点

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.navigate 方法的第一个参数应该是 ['/full'] 而不是 ['full']。

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

Answer 2

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

<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

Angular 2条路线儿童有网点

Angular 2 routes children with outlets

routes

angular-routing

angular