は、私はこのような角度2で事前ブートストラップロードをアニメーション化していますAngular2

Question

の事前ブートストラップのロード画面を使用して、空白ページの第二のを避けてくださいアニメーションと最終ページの間の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; 
     } 
    }