是否可以在模块延迟加载模块上显示剩余时间或百分比？

Question

我想显示延迟加载模块时的加载时间或百分比。我想显示实时加载模块所花费的时间。

我尝试了RouteConfigLoadStart和RouteConfigLoadEnd方法，它们可以正常工作。加载时，将显示模块加载器组件，完成后该组件将关闭，但我想显示还剩下多少时间来加载模块。

Component.ts：

this.router.events.subscribe(event => {
  if (event instanceof RouteConfigLoadStart || event instanceof ResolveStart) {
    this.moduleLoading = true;
  }
  if (event instanceof RouteConfigLoadEnd || event instanceof ResolveEnd) {
    this.moduleLoading = false;
  }
});

component.html：

<div class="content-wrapper" style="padding: 0px;">
  <div *ngIf="moduleLoading" class="square-box-loader" style="left: 56%;">
    <div class="square-box-loader-container">
      <div class="square-box-loader-corner-top"></div>
      <div class="square-box-loader-corner-bottom"></div>
    </div>
    <div class="square-box-loader-square"></div>
  </div>
  <router-outlet *ngIf="!moduleLoading"></router-outlet>
</div>

我想显示剩余的模块加载时间。例如，剩余5秒或加载10％/加载50％等。

如何显示加载百分比或加载完成之前的时间？