以角度2打印路径树

Question

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

const puppeteer = require('puppeteer');

puppeteer.connect({"browserWSEndpoint" : "ws://some_string"}).then(async browser => {
    console.log("bla bla");
    ...
});

但是我找不到加载他们的懒惰孩子的解决方案。当我使用Augury浏览器插件时，我可以立即看到整个地图。有什么建议吗？

Answer 1

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

说完，如果要在加载延迟加载模块后检查配置，可以在下面使用，

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

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

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

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

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

在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 || []);
    });
  };
 ......
 ......

希望这会有所帮助!!

Answer 2

您可以获得所有＆＃34;路线：路线= []＆＃34;（来自每个模块）并创建树

这是肮脏的黑客，但对我有用