我有一个Angular 7应用,其根app-routing.module.ts有两条路线。
在某些子路由中,路由应用作为父路由,其他路由模块也有子路由。
我已经在使用,并且已经定制了阿德里安·保罗(Adrian Paul)对以下问题的回答,当我只有一层孩子但不适用于多层时,它有点用: https://stackoverflow.com/a/53208406/10928399
app-routing.module.ts
const routes: Routes = [
{
path: 'login',
loadChildren: './../../login.module#LoginModule'
},
{
path: '',
loadChildren: './../layout.module#LayoutModule',
canActivate: [AuthGuard]
}
];
layout-routing.module.ts
const routes: Routes = [
{
path: '',
component: LayoutComponent,
children: [
{
path: '',
redirectTo: 'some-route',
pathMatch: 'full'
},
{
path: 'some-component',
loadChildren: './some-component/some-component-layout.module#SomeComponentLayoutModule',
canActivate: [AuthGuard],
data: {
label: 'Some Component'
}
},
{
path: 'some-other-component',
loadChildren: './some-other-component/some-other-component.module#SomeOtherComponentModule',
canActivate: [AuthGuard],
data: {
label: 'Some Other Component'
}
}
]
}
];
some-other-component-routing.module.ts
const routes: Routes = [
{
path: '',
component: MultiReaderConfigurationViewComponent,
children: [
{
path: '',
redirectTo: 'child'
},
{
path: 'child',
component: ChildComponent,
canActivate: [AuthGuard],
resolve: [ChildService],
data: {
label: 'Child'
}
},
{
path: 'child2',
component: Child2Component,
canActivate: [AuthGuard],
resolve: [Child2Service],
data: {
label: 'Child2'
}
}
]
}
];
这是我从上述答案中“升级”代码以到达子路由的方法,但是我认为这很丑陋,如果我想更深入的话,效率也不高:
private getMenusFromRouterConfig(menus: IMenuItem[], parent: string, routes: Route[]): void {
for (let menuIndex = 0; menuIndex < routes.length; menuIndex++) {
const route = routes[menuIndex];
const routerConfig: LoadedRouterConfig = (route as any)._loadedConfig;
const fullPath = this.getFullPath(parent, route.path);
const children: IMenuItem[] = [];
if (route.data && route.loadChildren && route.loadChildren.length > 0) {
this.pushItemsToMenu(children, menus, menuIndex, route);
}
if (route.children) {
this.getMenusFromRouterConfig(menus, fullPath, route.children);
}
if (route.loadChildren && route.loadChildren.length > 0 && routerConfig) {
this.getMenusFromRouterConfig(menus, fullPath, routerConfig.routes);
}
}
}
private getFullPath(parent: string, path: string): string {
return parent + '/' + path;
}
private pushItemsToMenu(childArray: IMenuItem[], menus: IMenuItem[], menuIndex: number, route: Route): void {
const routerConfig: LoadedRouterConfig = (route as any)._loadedConfig;
const menuPath = route.path;
const children: IMenuItem[] = [];
if (routerConfig) {
routerConfig.routes.filter(x => x.data && x.data.label).forEach((child, idx) => {
childArray.push({
id: idx,
label: child.data.label,
routerLink: this.getFullPath('/' + menuPath, child.path),
children
});
});
routerConfig.routes.filter(x => x.children).forEach(element => element.children.filter(x => x.data && x.data.label).forEach((child, idx) => {
childArray.push({
id: idx,
label: child.data.label,
routerLink: this.getFullPath('/' + menuPath, child.path)
});
}));
}
menus.push({
id: menuIndex,
label: route.data.label,
routerLink: '/' + menuPath,
children: childArray
});
}
感谢任何帮助或提示。