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

Question

在我的主要路线中,我将我的个人资料模块延迟加载,/profile如下所示:

  {
      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模块时显示一些加载器？

Answer 1

router-outlet 不会将东西放入其自身内部，它会将其放在旁边。

当它为空时：

<router-outlet></router-outlet>

所以，当它加载时，它将是：

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

所以router-outlet:empty不应该做任何事情。

你可以说 ：

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