angular – 在模块延迟加载时显示加载动画？

发布时间：2020-12-17 08:51:57 所属栏目：安全来源：网络整理

导读：在我的主要路线中,我的配置文件模块延迟加载/配置文件,如下所示： { path: '',component: HomeComponent },{ path: 'profile',loadChildren: './profile/profile.module#ProfileModule' },{ path: '**',redirectTo: '',pathMatch: 'full' } 但是,我的配置文

在我的主要路线中,我的配置文件模块延迟加载/配置文件,如下所示：

{
      path: '',component: HomeComponent
  },{
      path: 'profile',loadChildren: './profile/profile.module#ProfileModule'
  },{
      path: '**',redirectTo: '',pathMatch: 'full'
  }

但是,我的配置文件模块加载需要大约1.5到2秒,这很慢.我想在我的模块加载时显示某种加载动画,无论如何都要这样做吗？我试过这样做：

app.component.html

<!-- other stuff ... -->

<router-outlet></router-outlet>
<div class="loading">
  <div class="spinner">
    <div class="rect1"></div>
    <div class="rect2"></div>
    <div class="rect3"></div>
    <div class="rect4"></div>
    <div class="rect5"></div>
  </div>
</div>

在我的CSS里面,我有：

/* default .loading styles,.loading should be invisible,opacity: 0,z-index: -1 */
  .loading {
      opacity: 0;
      transition: opacity .8s ease-in-out;
      position: fixed;
      height: 100%;
      width: 100%;
      top: 0;
      left: 0;
      background: #1B1B1B;
      color: white;
      z-index: -1;
  }
  /* .loading screen is visible when app is not bootstraped yet,.my-app is empty */
  router-outlet:empty + .loading,router-outlet:empty + .spinner {
      opacity: 1;
      z-index: 100;
  }  

  /* spinner animation css stuff */

但这似乎不起作用,无论如何在加载angular2模块时显示一些加载器？

router-outlet不会把东西放在里面,它会把它放在旁边.

什么时候是空的：

<router-outlet></router-outlet>

因此,当它被加载时,它将是：

<router-outlet></router-outlet>
<your-code></your-code> // which is loaded afterward

所以router-outlet：空不应该做任何事情.

你可以说：

router-outlet + .loading .spinner {
      opacity: 1;
      z-index: 100;
  }

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!