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

Question

我使用loadChildren来组织我的路由，像这样。

app-routing.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 {}

cadastros-routing.模块.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

经过搜索，我找到了一个解决懒惰加载的方法，它的名字叫。叫做："预加载

https:/angular.ioguiderouter#preloading-background-loading-of-feature-areas。

现在，我加载了所有的模块异步和我有所有的路线。但这并不是敷衍了事，所以我又回到了以前的方式来创建这个菜单。