Angular 的路由，某些功能模块具有通用布局

Question

我有一个 Angular 7 应用程序，具有 3 个用户角色，A、B 和 C。A 和 B 共享相同的视觉布局，但菜单项发生变化（主题和结构相同，数据不同). C 有一个完全不同的布局。

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

工作流程：用户登陆具有三个按钮的主页，这些按钮将路由到模块 A、B 和 C。或者她可以通过为相关 URL 添加书签直接导航到正确的模块.

我的应用-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 { }

问题：

我是否应该在我的 AppModule 中 bootstrap AppComponent 即使我在这个组件中除了在 app.component.html 中有 <router-outlet></router-outlet> 之外没有做任何事情？
如何将我的 CommonLayoutComponent 视为 master/layout 页面（如 ASP.NET MVC 布局页面）并在其中弹出模块 A 和 B 的 <router-outlet></router-outlet>？

Answer 1

因为你想为 A 和 B 保持相同的布局，使它们成为子路由并将布局相关 html + CommonLayoutComponent 组件中的附加路由器出口。像这样..

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

Angular 的路由，某些功能模块具有通用布局

Routing for Angular with common layout for some feature modules

typescript

angular

angular7