时间戳

首页 > 解决方案 > Angular 路由与某些功能模块的通用布局

angular - Angular 路由与某些功能模块的通用布局

问题描述

我有一个具有 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即使我没有在这个组件中做任何事情，除了app.component.html 之外，我是否仍然应该在我的 AppModule<router-outlet></router-outlet>中引导？
  2. 如何将我的CommonLayoutComponent作为主/布局页面（如 ASP.NET MVC 布局页面）并将<router-outlet></router-outlet>其弹出模块 A 和 B？

标签： angulartypescriptangular7

解决方案

由于您想为 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 }

];

推荐阅读