访问功能模块路由来自应用模块的配置数据答案

【问题标题】：Access feature module routes config data from app module访问功能模块路由来自应用模块的配置数据
【发布时间】：2022-09-27 18:06:18
【问题描述】：

有什么方法可以从应用程序的路由配置访问功能模块路由配置。零件

我有一个延迟加载的功能模块。我想访问我的app.module 上的功能模块路由数据，以根据 URL 的子路径突出显示我的侧导航栏（KendoUI 抽屉）菜单项。例如，如果将http://localhost:4200/parent/child-component-name 传递到浏览器导航用户应该看到在侧导航栏中选择了child-component-name。

从 \'@angular/core\' 导入 { NgModule }；从\'@angular/router\'导入{RouterModule}；

------------ app.routing.module.ts --------------

const parentRoutes = [
  {
    path: \'\',
    redirectTo: \'parent\',
    pathMatch: \'full\',
  },
  {
    path: \'parent\',
    loadChildren: () =>
      import(\'./modules/parent/parent.module\').then(
        (m) => m.parent
      ),
  },
];

------------ child.routing.module.ts --------------

const routes: Routes = [
   {
     path: \'\',
     component:ParentViewComponent,
     children:[
       {
         path:\'\',
         component: FirstChildComponent,
       },
       {
         path: \'second\',
         component: SecondChildComponent,
       },
       {
         path: \'third\',
         component: ThirdChildComponent,
       },
     }
   ]

在我的 app.component.ts 中，我能够使用 this.router.config 访问父路由数据，但在 app.routing.module.ts 中只提供了两条路由。

标签： angular angular-routing angular-router

【解决方案1】：

您可以在为延迟加载的功能模块修改路由配置后重置路由配置。

为了访问功能模块的路由配置（在您的情况下为子路由模块），您可以尝试访问 _loadedRoutes 并根据需要进行修改并重置整体路由配置。

Const newConfig=this.router.config.map(routeConfig=>{
if(routeConfig.path==='parent')
{
    // Here you can find the route configs for lazy loaded module for path 'parent'
    console.log(outeConfig._loadedRoutes)

    // Do the modifications here

}

return routeConfig

})

this.router.resetConfig(newConfig)


// ie; this.routee.config[<indexOfLazyloadedModule>]._loadedRoutes

【讨论】：