使用某些功能模块的通用布局进行Angular布线

Question

我有一个具有3个用户角色（A，B和C）的Angular 7应用。A和B共享相同的视觉布局，但菜单项更改（主题和结构相同，数据不同）。 C具有完全不同的布局。

我的应用程序有AppModule ， SharedModule ， CoreModule ， HomeModule ， AModule ， BModule和CModule 。 我的通用布局位于一个名为CommonLayoutComponent的组件中，该组件从SharedModule导出，并在模块A和B中使用。

工作流程：用户进入具有三个按钮的主页，该按钮将路由到模块A，B和C。或者，她可以通过标记相关URL来直接导航到正确的模块。

我的app-routing.module.ts

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'a', component: AComponent },
  { path: 'b', component: BComponent },
  { path: 'c', component: CComponent }
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

问题：

1. 即使我除了在AppComponent中具有<router-outlet></router-outlet>之外，在此组件中不做任何事情，我仍应该在AppModule中引导AppComponent吗？
2. 如何将CommonLayoutComponent视为主页面/布局页面（如ASP.NET MVC布局页面），并在其中将模块A和B的<router-outlet></router-outlet>弹出？

Answer 1

由于您要为A和B保持相同的布局，因此请使它们成为子路由，并在CommonLayoutComponent组件内放置与布局相关的html +一个附加的路由器出口。 像这样

const routes: Routes = [
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
{ path: '', component: CommonLayoutComponent, children:[
{ path: 'a', component: AComponent },
{ path: 'b', component: BComponent },
]},
{ path: 'c', component: CComponent }

]。