我想为不同的功能模块使用相同的布局(在 app.module.ts 中定义),每个模块都有自己的路由。还有一个单独的登录/注册布局,没有侧边菜单、页眉和页脚。到目前为止我试过这个:
//../app/app.component.html
<router-outlet></router-outlet> // here i want login and layout view.
和一个布局组件:
//../app/layout.component.html
<header></header>
<side-menu></side-menu>
<router-outlet></router-outlet> // here i want layout views that would have side menu with them e.g. dashboard, inventory etc
<footer></footer>
仪表板路线在 app.module.ts 中,但库存和其他模块有自己的模块和路线,如下所示:
//app.module.ts
const appRoutes: Routes = [
{ path: 'login', component: LoginComponent },
{
path: '',
component: LayoutComponent,
children: [
{ path: '', component: DashboardOne},
{ path: 'dashboardOne', component: DashboardOne},
{ path: 'dashboardTwo', component: DashboardTwo}
],
canActivate: [AuthGuard]
}
];
@NgModule({
declarations: [
AppComponent,
DashboardOneComponent,
DashboardTwoComponent,
LoginComponent,
LayoutComponent
],
imports: [
RouterModule.forRoot(
appRoutes,
{ enableTracing: true } // <-- debugging purposes only
),
InventoryModule,
WarehouseModule,
UserModule,
],
providers: [AuthGuard],
bootstrap: [AppComponent]
})
export class AppModule { }
和另一个模块:
//inventory.module.ts
const appRoutes: Routes = [
{
path: 'inventory',
//component: LayoutComponent,
children: [
{ path: '', component: InventoryOne},
{ path: 'inventoryOne', component: InventoryOne},
{ path: 'inventoryTwo', component: InventoryTwo}
],
canActivate: [AuthGuard]
}
];
@NgModule({
declarations: [
AppComponent,
InventoryOneComponent,
InventoryTwoComponent,
//LayoutComponent // want to use this layout in other modules too
],
imports: [
RouterModule.forChild(
appRoutes
),
],
providers: [],
})
export class InventoryModule { }
如果我从库存模块中删除布局组件的注释,它会重新呈现布局组件(我不想要那样)我想在每个有自己的路由但到目前为止无法这样做的模块中使用 layoutComponent。
最佳答案
在您的 AppModule
中,您可以默认重定向到 FeaturesModule
,它将具有来自 LayoutComponent
的菜单,而 AuthGuard 可以重定向需要时到 /login
。
const appRoutes: Routes = [
{
path: '',
loadChildren: '../<insertyourpath>/features.module#FeaturesModule',
canActivate: [AuthGuard]
},
{
path: 'login',
component: LoginComponent
}
];
在您的 FeaturesModule
中,您将在 LayoutComponent
的导出中呈现特征路径:
const featureRoutes: Routes = [
{
path: '',
component: LayoutComponent,
children: [
{
path: 'inventory',
loadChildren: '../<insertyourpath>/inventory.module#InventoryModule'
}
]
}
];
在您的 InventoryModule
中,您放置了所有模块的子路由(分别为其他 FeatureModule)。仪表板必须移动到 FeaturesModule 或它自己的模块。:
const inventoryRoutes: [
{ path: '', component: InventoryOne},
{ path: 'inventoryOne', component: InventoryOne},
{ path: 'inventoryTwo', component: InventoryTwo}
];
请注意,使用给定的 loadChildren
语法,引用的模块将被延迟加载。如果您希望同步加载它,请查看此 SO answer .
关于angular - 具有相同父布局 Angular 功能模块路由,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48250269/