angular - 使用 Angular2 的预引导加载屏幕避免一秒钟的空白页面

Question

我正在像这样在 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;
      }
  }