在角度2中打印路径树

Question

我想打印我的应用程序的可视站点地图，并希望为此使用路由器。我知道目前的路线可以通过router.config访问像

this.router.config.forEach(route => { 

，但我不能找到一个解决方案来加载自己的懒加载孩子。当我使用Augury浏览器插件时，我可以很快看到整个地图。有什么建议么？

Answer 1

在加载延迟加载的模块之前，Augury也不会显示路由，您可以通过转到route example app并查看路由器树来查看路由器，但不会找到管理路由。

话虽如此，如果你想偷懒加载模块加载后，检查配置，可以在下面使用，

this.router.events.filter(e => e instanceof RouteConfigLoadEnd).subscribe(e => { 
    console.log(this.router.config); 
}); 

RouteConfigLoadEnd表示事件触发时，路由已被延迟加载。

一旦配置更新，您将在您的懒惰模块路由中找到一个名为​​的属性，该属性将具有配置。

入住这Plunker !!，看看app.component.ts，我在上面的代码中AppComponent构造增加。

出curosity的，我一直在寻找进入占卜代码如何更新路由器的树，我发现下面，

在backend.ts，有订阅的ngZone.onStable其

代码通知当最后onMicrotaskEmpty已经用完，也没有更多的 microtasks

在订阅如果路线已被更改或不检查，如果改变，那么路线解析和路由树更新后，

片段是从parse-modules.ts下面为，

export const parseModulesFromRouter = (router, existingModules: NgModulesRegistry) => { 
    const foundModules = []; 

    const _parse = (config) => { 
    config.forEach(route => { 
     if (route._loadedConfig) { 
     foundModules.push(route._loadedConfig.module ? 
      route._loadedConfig.module.instance : 
      route._loadedConfig.injector.instance); 
     _parse(route._loadedConfig.routes || []); 
     } 
     _parse(route.children || []); 
    }); 
    }; 
...... 
...... 

希望这有助于！