angular - 如何基于 api 调用数据在延迟加载中动态添加角度路由路径

Question

根据我的登录数据，我正在进行 API 调用以获取要为延迟加载模块添加的动态路由。但是导航发生在我将路由添加到延迟加载的模块之前。如果路径不匹配，它应该导航到 notfoundcomponent。

我已经尝试过导航拦截器，如导航开始、导航结束、RouteConfigLoadStart.RouteConfigLoadEnd、router.events 以及更多接口和事件。

懒惰模块1：-->路由模块-->

const routes: Routes = [ { path: '**', component: NoaccessComponent } ]

一旦登录调用 API 以获取动态路由路径并添加到像这样的延迟加载模块，我已经签署了组件

addDynamicPath(config: Array<Route>, modulePath):
 Promise<Array<Route>> {

     return new Promise((resolve, reject) => {
       // Trigger change detection so _loadedConfig is available in router
       setTimeout(() => {
         var glb = this.global;
         var glb1 = this.router.config;
         var currentModule, currentModuleRoute;
         var currentrouteMap;
         let configIsChanged = false;
         if (modulePath != 'modulename') {
           for (const key in this.global.menuList) {
             if (key.toUpperCase() == modulePath.toUpperCase()) {
               currentModule = this.global.menuList[key];
             }
           }
           currentrouteMap = routeMap[modulePath];
           currentModuleRoute = config.filter(root => (root as any)._loadedConfig && root.path === modulePath);
           currentModuleRoute = currentModuleRoute.length > 0 ? currentModuleRoute[0] : null;

           if ((currentModule && currentModule.length > 0) && currentModuleRoute) {
             currentModule.forEach(element => {
               if (modulePath == 'crm' && ['users', 'roles'].indexOf(element.pagePath) != -1) {
                 let rPath = currentrouteMap.filter(r => r.path == element.pagePath)[0];
                 config.splice(2, 0, {
                   path: rPath.path,
                   component: rPath.component,
                   canActivate: [NavigationGuard],
                   data: { title: element.name }
                 });
               }
               else {
                 let path = element.pagePath.replace(modulePath + '/', '');
                 let rPath = currentrouteMap.filter(r => r.path == path)[0];
                 var temp=[]
                 if (rPath) {
                   currentModuleRoute._loadedConfig.routes.unshift({
                     path: path,
                     component: rPath.component,
                     canActivate: [NavigationGuard],
                     data: { title: element.name }
                   })
                 }
               }


             });
             currentModuleRoute._loadedConfig.routes.push({ path: '**', component: NoaccessComponent })
           }
           else {
             currentModuleRoute && currentModuleRoute._loadedConfig.routes.push(
               { path: '**', component: NoaccessComponent }
             )
           }
           console.log(currentModuleRoute._loadedConfig.routes);

         }

         resolve(null);
       }, 0);
     });   }

惰性模块 routing.ts 常量路由：

Routes = [ { path: '**',
 component: NoaccessComponent } ]

api数据

[ { path: 'dynamic path1', component: dynamicmponent1name},
 { path: 'dynamic path1', component: dynamicmponent2name}, { path:
 'dynamic path1', component: dynamicmponent3name} ]

结果

const routes: Routes = [ { path: 'dynamic path1', component:
 dynamicmponent1name}, { path: 'dynamic path1', component:
 dynamicmponent2name}, { path: 'dynamic path1', component:
 dynamicmponent3name} { path: '**', component: NoaccessComponent } ]

即使在签名和从任何页面刷新时也会发生这种情况，例如： localhost:4200 localhost:4200/module/dynamicpath

标签： angulartypescriptdynamicroutes