Angular 8 - 如何在我的 angular 项目中构建包含所有路由的动态菜单？

Question

我正在使用 loadChildren 来组织我的路线，如下所示：

应用程序路由.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  { path: 'cadastros', loadChildren: () => import('./cadastros/cadastros.module').then((m) => m.CadastrosModule) },
  { path: 'admin', loadChildren: () => import('./admin/admin.module').then((m) => m.AdminModule) }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: false })],
  exports: [RouterModule]
})
export class AppRoutingModule {}

地籍路由.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  {
    path: '',
    children: [
      { path: 'geral', loadChildren: () => import('./geral/geral.module').then((m) => m.GeralModule) },
      { path: 'geo', loadChildren: () => import('./geo/geo.module').then((m) => m.GeoModule) },
      { path: 'pgv', loadChildren: () => import('./pgv/pgv.module').then((m) => m.PgvModule) }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class CadastrosRoutingModule {}

我想建立一个动态菜单，所以我尝试使用它：

  constructor(private router: Router) {
    console.log('routers', this.router.config)
  }

这是结果： console.log(this.router.config)

但是我无法访问loadChildren以获取所有路线...如何获取所有路线以构建动态菜单？

Answer 1

经过搜索，我找到了lazyLoaded的解决方案，它被称为： 'preloaded'

https://angular.io/guide/router#preloading-background-loading-of-feature-areas

现在我异步加载了所有模块，并且拥有了所有路由。 但这不是 perfomatic，所以我回到我以前的方式来创建这个菜单。