使用延遲加載的路由/模塊啟動時的Angular 5加載微調器

Question

在Angular 5中，如果請求的路由/模塊是延遲加載的 ，如何在應用啟動時顯示加載微調器 ？

我的第一個想法是簡單地將微調器代碼包含在<app-root>標記內（請參閱此問題 ，尤其是Christophe Vidal對已接受答案的評論）。

這很好用， 但是 ，如果在應用啟動時，請求的路由恰好是與延遲加載的路由/模塊相對應的路由，則會出現問題。

在這種情況下，微調器最初將顯示為預期的狀態，但是會過早消失 。 更具體地說，當微調框消失時，在實際內容出現之前還剩下明顯的時間。

我認為此延遲是由於延遲加載造成的，即使尚無內容，我的<app-root>微調器也已被覆蓋？

的index.html

<app-root>
    <div class="loading">
        <!-- loading spinner here -->
    </div>
</app-root>

在這種情況下，您將如何顯示加載微調器？

注意：我並不是在通過http獲取數據時詢問顯示微調器，而是在啟動應用程序時詢問顯示微調器。

Answer 1

我認為這是在初始化時在您的應用程序根app.component.ts預訂Angular路由器事件。 但是，請務必注意，這不僅會導致在加載延遲加載的組件時顯示微調框，而且還會在您導航到任何路線時顯示該微調框。 （可能不是您想要的）

ngOnInit(){
 router.events.subscribe( (event: Event) => {

            if (event instanceof NavigationStart) {
                /*Display your spinner*/
            }

            if (event instanceof NavigationEnd) {
                /*Hide your spinner*/
            }
        });
}

***更新***

我發現您可以綁定到<router-outlet> ，這將使您能夠確定要加載的組件。 我知道，努力是讓微調器僅在惰性加載的組件加載后才停止旋轉。 通過綁定到app.component.ts的router-outlet ，您可以確定要加載的組件，然后停止微調器。

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'my-app',
  template: `<router-outlet #outlet></router-outlet>`
})
export class AppComponent implements AfterViewInit {
  @ViewChild(RouterOutlet)
  public outlet: RouterOutlet;

  public ngAfterViewInit(): void {
    this.outlet.activateEvents.subscribe((component) => {
      if (component.__proto__.constructor.name === 'myLazyComponent') {
        //Hide Spinner
      }
    });
  }
}

Answer 2

有路由器事件 ：RouteConfigLoadStart和RouteConfigLoadEnd，因此代碼為：

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'my-app',
  template: `<app-spinner *ngIf="showSpinner"></app-spinner><router-outlet></router-outlet>`
})
export class AppComponent implements AfterViewInit {
  showSpinner: boolean = false;

  constructor(private router: Router) {
      this.router.events.subscribe(
              event => {
                if(event instanceof RouteConfigLoadStart) {
                  showSpinner = true;
                  return;
                }
                if(event instanceof RouteConfigLoadEnd) {
                  showSpinner = false;
                  return;
                }
          }
      );
   }
}

app-spinner組件可以是某種形式的疊加層，在瀏覽器窗口的中間帶有旋轉圖標。