Question

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

Answer 1

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

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

在secon组件中定义您的人员布局白衣/人员根

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

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

1 个答案: