如何从Angular的App组件访问懒加载特性模块的路由配置？

我有一个懒加载的特性模块，希望在app.module中访问该模块的路由配置，从而根据URL的子路径高亮KendoUI Drawer侧边栏菜单项。例如，当在浏览器地址栏输入http://localhost:4200/parent/child-component-name时，侧边栏中的child-component-name菜单项应被选中。

导入语句 #

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';

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中的两条路由配置，无法获取特性模块的路由配置。

懒加载模块的路由配置在模块未被加载前不会被加入到router.config中，所以直接通过this.router.config拿不到。这里提供几种可行的方案：

方案1：提前导出特性模块的路由配置 #

把特性模块的路由配置单独抽成一个独立文件，在App模块中直接导入这个配置文件，不管模块是否懒加载，都能拿到完整的路由规则。

1. 新建child-routes.ts文件并导出路由：

import { Routes } from '@angular/router';
import { ParentViewComponent } from './parent-view.component';
import { FirstChildComponent } from './first-child.component';
import { SecondChildComponent } from './second-child.component';
import { ThirdChildComponent } from './third-child.component';

export const childRoutes: Routes = [
   {
     path: '',
     component:ParentViewComponent,
     children:[
       {
         path:'',
         component: FirstChildComponent,
       },
       {
         path: 'second',
         component: SecondChildComponent,
       },
       {
         path: 'third',
         component: ThirdChildComponent,
       },
     ]
   }
];

2. 在child.routing.module.ts中导入使用该配置：

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { childRoutes } from './child-routes';

@NgModule({
  imports: [RouterModule.forChild(childRoutes)],
  exports: [RouterModule]
})
export class ChildRoutingModule {}

3. 在app.component.ts中直接导入childRoutes获取配置：

import { childRoutes } from './modules/parent/child-routes';

ngOnInit() {
  console.log(childRoutes); // 直接拿到特性模块的完整路由配置
}

方案2：监听路由事件，模块加载后动态获取配置 #

当懒加载模块被加载完成后，Angular会触发RoutesRecognized事件，此时router.config会自动更新包含该模块的路由。可以监听这个事件，在模块加载完成后获取完整配置：

import { Router, RoutesRecognized } from '@angular/router';
import { filter } from 'rxjs/operators';

constructor(private router: Router) {}

ngOnInit() {
  this.router.events.pipe(
    filter(event => event instanceof RoutesRecognized)
  ).subscribe(() => {
    // 此时router.config已包含加载后的特性模块路由
    const parentRoute = this.router.config.find(route => route.path === 'parent');
    if (parentRoute && parentRoute.children) {
      console.log(parentRoute.children); // 获取特性模块的子路由配置
    }
  });
}

方案3：直接通过路由状态匹配菜单项（推荐） #

其实不需要获取完整路由配置，也能实现侧边栏菜单项高亮。可以利用Angular Router内置的router.isActive()方法，直接判断当前URL是否匹配菜单项的路径：

1. 定义侧边栏菜单项数组：

menuItems = [
  { text: '首页', path: '/parent' },
  { text: 'Second', path: '/parent/second' },
  { text: 'Third', path: '/parent/third' }
];

2. 在模板中使用router.isActive()判断激活状态：

<kendo-drawer-item
  *ngFor="let item of menuItems"
  [text]="item.text"
  [selected]="router.isActive(item.path, true)"
>
</kendo-drawer-item>

• 第二个参数true表示严格匹配路径，若需要匹配子路径可传false。

内容的提问来源于stack exchange，提问作者NicoleZ