两个具有不同布局的主要路由器插座答案

【问题标题】：Two main router-outlets with different layouts两个具有不同布局的主要路由器插座
【发布时间】：2017-03-03 00:29:26
【问题描述】：

Layout for personnel (like admin control panel)

我有一个router-outlet，它有第一个布局。在/personnel 我想使用第二个。怎么做？我不想隐藏元素，因为personnel 也有它的组件，如personnel/users 等。

我想将personnel 作为独立组件加载，该组件不在主router-outlet 内。 personnel 应该有它自己的 router-outlet。

让我们更清楚一点。

const appRoutes: Routes = [
  { // first layout (here is the first and for now the only one router-outlet
    path: '',
    children: [
      { path: '', component: SiteComponent, pathMatch: 'full' },
      { path: 'install', component: InstallationComponent, canActivate: [ InstallationAuth ] },
      { path: 'login', component: LoginComponent, canActivate: [ LoginAuth ] },
      { path: 'register', component: RegisterComponent },
      { path: 'reset', component: ResetComponent, canActivate: [ LoginAuth ] }
    ]
  },
  { //second layout (personnel should have it's own router-outlet
    path: 'personnel',
    children: [
      { path: '', component: PersonnelComponent, canActivate: [ PersonnelAuth ]},
      { path: 'users', component: UsersComponent, outlet: 'personnel' }
    ]
  }
];

【问题讨论】：

标签： angular routing router outlet

【解决方案1】：

您可以将路由层次结构向下移动一级，因此在您的根应用程序组件中定义单个 <router-outlet></router-outlet> 而不使用任何布局，在一步向下定义您的默认空路由组件与您的主布局

<...LayoutMain>
 <router-outlet></router-outlet>
<...LayoutMain>`

在第二个组件中定义您的人员布局 whit /personnel root

  <...Layoutpersonnel >
     <router-outlet></router-outlet>
    <...Layoutpersonnel >`

【讨论】：