使用 Pre-Bootstrap Loading Screen For Angular2 避免一秒钟的空白页面

Question

我正在 bootstrap 加载前 Angular 2 中设置动画，如下所示：

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

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

可能是因为我在加载最终模块之前完成了 app-root 组件的加载。

有什么方法可以避免这种情况？

Answer 1

发生这种情况是因为您的应用程序组件从服务器加载惰性组件，因此需要一些时间才能显示空白屏幕。您可以通过在 app-component.html.

中导入代码来避免这种情况

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

这应该覆盖整个屏幕并在 app.component.ts

  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;
      }
  }

使用 Pre-Bootstrap Loading Screen For Angular2 避免一秒钟的空白页面

Avoid a second of blank page using Pre-Bootstrap Loading Screen For Angular2

animation

lazy-loading

angular2-routing

angular