Angular懒加载路由：如何安全访问Route._loadedRoutes？

直接访问Route._loadedRoutes确实不是最优解，因为这是Angular标记为内部的私有属性（以下划线开头），官方不保证其兼容性，版本迭代中可能被修改或移除。下面提供两种更安全的替代方案：

方案一：利用Router公开的config属性获取完整路由配置 #

懒加载路由完成加载后，其配置会自动合并到Router.config中，你可以直接遍历这个公开属性来生成路由路径数组，无需依赖内部属性：

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

// 在组件或服务中
constructor(private router: Router) {}

ngOnInit() {
  this.router.events
    .pipe(filter(event => event instanceof RouteConfigLoadEnd))
    .subscribe(() => {
      // 遍历router.config获取所有路由（包括已加载的懒加载路由）
      const allRoutes = this.flattenRoutes(this.router.config);
      console.log('所有路由路径:', allRoutes.map(route => route.path));
    });
}

// 递归扁平化路由结构的辅助函数
private flattenRoutes(routes: Routes): Routes {
  let result: Routes = [];
  routes.forEach(route => {
    result.push(route);
    if (route.children && route.children.length > 0) {
      result = [...result, ...this.flattenRoutes(route.children)];
    }
  });
  return result;
}

方案二：使用类型断言替代any（相对更安全的内部属性访问） #

如果确实需要在RouteConfigLoadEnd事件中直接获取刚加载的路由，不要用any，而是定义一个扩展接口来做类型断言，保留类型检查的同时避免any的松散性：

import { Router, RouteConfigLoadEnd, Route, Routes } from '@angular/router';
import { filter } from 'rxjs/operators';

// 定义扩展接口，包含内部的_loadedRoutes属性
interface RouteWithLoadedRoutes extends Route {
  _loadedRoutes?: Routes;
}

// 在组件或服务中
constructor(private router: Router) {}

ngOnInit() {
  this.router.events
    .pipe(filter(event => event instanceof RouteConfigLoadEnd))
    .subscribe((event: RouteConfigLoadEnd) => {
      const routeWithLoaded = event.route as RouteWithLoadedRoutes;
      if (routeWithLoaded._loadedRoutes) {
        const loadedRoutes: Routes = routeWithLoaded._loadedRoutes;
        console.log('刚加载的路由:', loadedRoutes);
      }
    });
}

注意事项 #

• 优先选择方案一，完全依赖Angular公开API，兼容性和稳定性最好；
• 方案二只是比any更友好的临时方案，依然存在内部属性变更导致代码失效的风险，仅在特殊场景下使用。

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