时间戳

首页 > 解决方案 > 如何在延迟加载期间显示加载组件

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

问题描述

我在我的角度项目中做了延迟加载配置。完成了，但是有一个问题。

由于我的延迟加载组件太大（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 }
];

标签： javascriptangulartypescriptlazy-loadingcode-splitting

解决方案

Router.navigate 方法返回一个承诺。所以你可以调用 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>

这将在您单击导航到延迟加载组件后显示您的加载组件，直到延迟加载组件被加载。

推荐阅读