小白请教关于 Angular 路由的动态注册方式

[grittiness]

刚开始学习 Angular ，想通过后台管理页面学习上手。

Angular 文档上写的懒路由声明方式：

const routes: Routes = [
  {
    path: 'customers',
    loadChildren: () => import('./customers/customers.module').then(m => m.CustomersModule)
  }
];

按照一般后台管理系统的方式，菜单列表都是从接口获取，然后前端再根据接口的列表注册路由。在 Angular 里使用 Router 的 resetConfig 方法可以更新注册路由，那么问题就是：接口返回回来的每个菜单对应的模块 /组件的信息肯定是字符串格式，要怎样的方式才能变成文档中声明所需的格式？

import('./customers/customers.module').then(m => m.CustomersModule)

这或许看起来更像是 TypeScript 的使用问题？网上查了一圈资料都没找到有关的信息（也可能是我方法不对），因此前端小白特来 V2 请教下各位大佬 Angular 下动态注册路由的正确方式，感谢！

[chnwillliu]

换个思路，不能动态注册，那控制路由是否可访问是一样的。

后端不直接管辖菜单列表，而是管理用户的 Permission List, 前端再把 Permission 和路由对应起来，可以一对一也可以一对多。路由配置上有 canLoad 和 canActivate 两种 Guard 可用，把要检查的权限放路由 data 字段，permission guard 里检查用户权限是否匹配目标路由所需权限来决定是否放行。至于你的 menu list 组件展示问题，当然也可以根据用户权限来动态生成。

[chnwillliu]

当然 RouterModule.forRoot/forChild 是可以接受动态生成的 Routes 配置的，但是你的数据要在 Router Module import 之前就准备好，而且正如你说的从 API 数据到前端组件类型的映射绕不开，写起来会不优雅。所以，莫不如不追求动态注册，而是用 Guard 控制可访问性。

[sjhhjx0122]

用守卫控制一下权限就好了，菜单列表的配置肯定跟路由的 path 一样，守卫判断一下就好了，没必要这么繁琐

[grittiness]

@chnwillliu
@sjhhjx0122
确实用守卫来控制也是不错的方式，感谢解答！

[nzbin]

可以参考这个项目的配置
https://ng-matero.github.io/ng-matero/permissions/role-switching