Angular 角形布线和一些功能模块的通用布局

我有一个Angular 7应用程序，有3个用户角色，A、B和C。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 { }

问题:

即使除了app.component.html中的

之外，我没有在这个组件中执行任何操作，我还是应该在AppModule中引导

AppComponent

如何将我的

CommonLayoutComponent

视为主控/布局页面（如ASP.NET MVC布局页面），并将模块a和B的

弹出到主控/布局页面中

---

因为您希望保持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 }

---

])

那么，你想引导

CommonLayoutComponent

而不是

AppComponent

？@selemn我不知道，我的意思是，可能是HomeComponent。这回答了我的第二个问题，第一个问题呢？你必须至少有一个用于引导的组件。根级路由器插座应置于其内部。所以是的，你仍然需要它。否则，将在何处渲染/home或/c路由？