如何在延迟加载期间显示加载组件

Question

我在 angular 项目中进行了延迟加载配置。大功告成，但是有个问题

由于我的懒加载组件太大（700kb），从 Web 服务器加载组件的时间太长 (0.5s)

延迟加载时必须显示加载组件

但是我在angular路由器模块中找不到加载选项。

我试图找到 angular 关于延迟加载的路由器类型定义。

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方法returns一个承诺。所以你可以调用 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>

如何在延迟加载期间显示加载组件

How to show loading component during lazy loading

javascript

lazy-loading

typescript

code-splitting

angular