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

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;
  }