以角度2打印路径树

Question

我想打印我的应用程序的可视化站点地图,并希望使用路由器.我知道当前的路由可以通过router.config来访问

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

但我无法找到一个解决方案来加载他们的懒孩子.当我使用Augury浏览器插件时,我可以立即看到整个地图.有什么建议？

Answer 1

Augury 也不会显示路由，直到您加载延迟加载的模块，您可以通过转到路由示例应用程序进行检查，并查看路由器树，您将找不到管理路由。

话虽如此，如果您想在加载延迟加载模块后检查配置，您可以使用下面的，

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

RouteConfigLoadEnd表示路由延迟加载时触发的事件。

_loadedConfig更新配置后，您将在您的惰性模块路由中找到一个名为的属性，该属性将包含 config.properties 文件。

检查这个Plunker !!，查看app.component.ts，我在AppComponent构造函数中添加了上面的代码。

出于好奇，我正在研究 Augury 代码如何更新路由器树，我在下面找到了，

在backend.ts，有认购上以代码的ngZone.onStable这

当最后一个 onMicrotaskEmpty 运行并且没有更多微任务时通知

在订阅中检查路由是否已更改，如果更改，则解析路由并更新路由器树，

片段如下来自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 || []);
    });
  };
 ......
 ......