使用Angular2的预引导加载屏幕避免第二页空白

我正在Angular 2中为预引导加载制作动画，如下所示：

<app-root>
  <div class="background">
    <div class="wrapper">
      <div class="loading-ball">
      </div>
    </div>
  </div>
</app-root>

但是，当我添加了延迟加载模块功能时，我开始看到动画和最终页面之间有一个1秒的空白页面

这可能是因为我在加载最后一个模块之前加载完应用程序根组件

---

避免这种情况的方法是什么？

< P>这是因为你的应用程序组件从服务器加载懒惰组件，所以需要花费一些时间，在这里它显示了空白屏幕。 您可以通过导入

app component.html

中的代码来避免这种情况

<div class="background" *ngIf="loading">
    <div class="wrapper">
      <div class="loading-ball">
      </div>
    </div>
  </div>

---

为了让它为我工作，我必须通过以下方式更改ngOnInit中的代码（因为事件类型不会自动转换为RouterEvent）：var app=this；this.router.events.subscribe（函数（v:RouterEvent）{app.navigationInterceptor（v）}）；

  constructor(
      private _router: Router
  ) { }
  loading = false;

  ngOnInit() {
      this._router.events.subscribe(v => this.navigationInterceptor(v));
  }

  navigationInterceptor(event: RouterEvent): void {
      if (event instanceof NavigationStart) {
          this.loading = true;
      }
      if (event instanceof NavigationEnd) {
          this.loading = false;
      }
      if (event instanceof NavigationCancel) {
          this.loading = false;
      }
      if (event instanceof NavigationError) {
          this.loading = false;
      }
  }