Angular 如何使用角5为同一路径使用两个路由器插座

我有以下用于

AppComponent

的模板：

<div>
    <div>
        <router-outlet name="menu"></router-outlet>
    </div>
    <div>
        <router-outlet name="main"></router-outlet>
    </div>
</div>

我想在两种情况下使用此模板：

• 当我导航到

  /page1

  时，我希望

  菜单

  出口包含

  menu1组件

  ，而

  main

  出口包含

  main1组件

• 当我导航到

  /page2

  时，我希望

  菜单

  outlet包含

  Menu2Component

  和

  main

  outlet包含

  main2组件

我不明白孩子们是怎么工作的。 模块导入中我的路由应该是什么

---

我使用Angular 5。

总体方法是在您想要的路线上进行模式匹配，并为每个出口提供空的子路线

格式（带括号、大括号和缩进）一眼就看起来有点棘手，所以我将在这里隔离每条路线，并解释一下

假设您位于

/page1

：

const pageOneRoutes = {
   path: 'page1',
};

此路径有两个子路由（每个出口都有自己的子路由）。这两个子路径都是“空”路径，因为您希望子路径本身与

page1

匹配：

const pageOneRoutes = {
   path: 'page1',
   children: [
     { path: '', outlet: 'menu', component: Menu1Component },
     { path: '', outlet: 'main', component: Main1Component }
   ]
};

然后对

/page2

和其他要加载的组件重复此过程

const pageTwoRoutes = {
   path: 'page2',
   children: [
     { path: '', outlet: 'menu', component: Menu2Component },
     { path: '', outlet: 'main', component: Main2Component }
   ]
};

有关详细信息，请查看Angular的布线教程的这一部分，该教程使用此方法在子布线中进行模式匹配：

---

整个事情可能看起来像这样：

const ROUTES: Routes = [
 {
   outlet: 'primary',
   path: '',
   children: [
     {
       path: 'page1',
       children: [
         { 
           path: '',
           outlet: 'menu',
           component: Menu1Component
         },
         {
           path: '',
           outlet: 'main',
           component: Main1Component
         }
      },
      {
        path: 'page2',
        children: [
          { 
           path: '',
           outlet: 'menu',
           component: Menu2Component
          },
          {
           path: '',
           outlet: 'main',
           component: Main2Component
          }
        ]
      }
     ]
   ]
 } 
]

---

非常感谢你！只是一个小问题：当我在

page1

上时，如何导航到

page2

？我尝试了

this.router.navigate（['page2'，id]）

但我得到了以下错误：

错误：无法激活已激活的出口错误：无法激活已激活的出口