Question

我在Angular 2中设置了pre-bootstrap加载动画，如下所示：

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

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

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

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

Answer 1

发生这种情况是因为你的app-component从服务器加载了懒惰的组件，所以它需要一些时间才能显示空白屏幕。您可以通过导入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;
      }
  }

使用Angular2的Pre-Bootstrap加载屏幕避免使用第二个空白页

1 个答案: