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

Question

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

我有一个延迟加载的功能模块。我想访问我的

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

.

中只提供了两条路由

Answer 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

Answer 2

想象一下你的 app-routing.module.ts 看起来像这样：

const routes: Routes = [
{
    path: 'first-module',
    loadChildren: () => import('./modules/first-module/first.module').then(m => m.FirstModule)
},
{
    path: 'second-module',
    loadChildren: () => import('./modules/second-module/second.module').then(m => m.SecondModule)
},

你的 first-routing.module.ts 看起来像这样

const routes: Routes = [
{
    path: 'first-page',
    component: FirstPageComponent,
    data: {
        someData: 'abc'
    }
},
{
    path: 'second-page',
    component: SecondPageComponent,
    data: {
        extendedData: 'XYZ'
    }
},

您可以像这样访问特定模块路由的路由和配置。 如果没有该任播，您将收到错误消息“属性‘_loadedRoutes’在类型‘Route’上不存在。”

private getModuleRoutes(): Route[] {
    return (this.router.config.find(routeConfig=>
        routeConfig.path === 'first-module'
    ) as any)._loadedRoutes;
}