列出Angular7中的所有嵌套子路线

时间:2019-04-09 13:25:08

标签: angular angular-router

我有一个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
    });
  }

感谢任何帮助或提示。

0 个答案:

没有答案