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

Question

我有以下 AppComponent 模板：

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

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

当我导航到 /page1 时，我希望 menu 出口包含 Menu1Component 并且 main 出口包含 Main1Component
当我导航到 /page2 时，我希望 menu 出口包含 Menu2Component 并且 main 出口包含 Main2Component

我不明白 children 和命名网点是如何工作的。我在模块导入中的路由应该是什么？

我用Angular5.

Answer 1

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

格式（带方括号、花括号和缩进）乍一看有点棘手，所以我将在这里隔离每条路线并稍微解释一下...

假设您在 /page1:

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

此路径有两条子路由（每个出口都有自己的子路由）。这两个子路径都是 "empty" 路径，因为您希望子路径本身匹配 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 的路由教程的这一部分，它使用这种方法在子路由中进行模式匹配：https://angular.io/guide/router#child-route-configuration.

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

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
          }
        ]
      }
     ]
   ]
 } 
]

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

How to use two router outlets for same path using Angular 5

angular

router-outlet