如何在延遲加載期間顯示加載組件

Question

我在我的角度項目中做了延遲加載配置。 這樣做了，但是有一個問題。

因為我的延遲加載組件太大（700kb），從Web服務器加載組件的時間太長（0.5s）

我必須在延遲加載時顯示加載組件。

但我在角度路由器模塊中找不到加載選項。

我試圖找到關於延遲加載的角度路由器類型定義。

const routes: Routes = [
  { path: '', component: RandingPageComponent },
  {
    path: 'teams/:name',
    // Loading component cannot here
    loadChildren: 'src/app/domain/domain.module#DomainModule'
  },

  { path: '**', component: NotfoundComponent }
];

Answer 1

Router.navigate方法返回一個promise。 所以你可以調用then（）。 因此，你可以做的是，保持一個名為showLoadingComponent的變量，默認為false ，當你導航時，執行以下操作：

this.showLoadingComponent = true;
this.router.navigate(['/newComponent']).then(value => {
      this.showLoadingComponent = false;
});

在你的HTML中，

<div *ngIf="!showLoadingComponent">
    // default content
</div>
<appLoadingComponent *ngIf="showLoadingComponent"></appLoadingComponent>

在您單擊導航到延遲加載組件之后，這將顯示您的加載組件，直到加載延遲加載組件。

Answer 2

試試這個（app.component.ts）

import { Component } from "@angular/core";
import { Router, NavigationStart, NavigationEnd, Event, NavigationCancel, 
NavigationError } from "@angular/router";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"]
})
export class AppComponent {
  public showLoadingIndicator: boolean = true;
  constructor(private _router: Router) {
    this._router.events.subscribe((routerEvent: Event) => {
      if (routerEvent instanceof NavigationStart) {
        this.showLoadingIndicator = true;
      }

      if (routerEvent instanceof NavigationEnd ||
        routerEvent instanceof NavigationCancel ||
        routerEvent instanceof NavigationError) {
        this.showLoadingIndicator = false;
      }
    });
  }
}

在html（app.component.ts）

<div *ngIf="showLoadingIndicator" class="loading">Loading&#8230;</div>
<router-outlet></router-outlet>