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

Question

所有用户的布局

人员布局（如管理控制面板）

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

我想加载personnel为不在 main 内的独立组件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' }
    ]
  }
];

Answer 1

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

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

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

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