Question

所以我想在ngx-admin项目http://akveo.com/ngx-admin/

中添加一个微调器

我已将微调器添加到index.html中，出现了微调器，但随后仅渲染了我的导航栏，并且微调器继续旋转应显示模块的位置。导航栏仅在自身模块中调用，而不在路由模块中调用，这就是为什么我如此困惑以至于它无法正常工作。

<body>
<app-root>Loading...</app-root>

  <style>
      @-webkit-keyframes spin {
        0% {
          transform: rotate(0)
        }

        100% {
          transform: rotate(360deg)
        }
      }

      @-moz-keyframes spin {
        0% {
          -moz-transform: rotate(0)
        }

        100% {
          -moz-transform: rotate(360deg)
        }
      }

      @keyframes spin {
        0% {
          transform: rotate(0)
        }

        100% {
          transform: rotate(360deg)
        }
      }

      .spinner {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1003;
        background: #000000;
        overflow: hidden
      }

      .spinner div:first-child {
        display: block;
        position: relative;
        left: 50%;
        top: 50%;
        width: 150px;
        height: 150px;
        margin: -75px 0 0 -75px;
        border-radius: 50%;
        box-shadow: 0 3px 3px 0 rgb(25, 136, 2);
        transform: translate3d(0, 0, 0);
        animation: spin 2s linear infinite
      }

      .spinner div:first-child:after,
      .spinner div:first-child:before {
        content: '';
        position: absolute;
        border-radius: 50%
      }

      .spinner div:first-child:before {
        top: 5px;
        left: 5px;
        right: 5px;
        bottom: 5px;
        box-shadow: 0 3px 3px 0 rgb(85, 255, 6);
        -webkit-animation: spin 3s linear infinite;
        animation: spin 3s linear infinite
      }

      .spinner div:first-child:after {
        top: 15px;
        left: 15px;
        right: 15px;
        bottom: 15px;
        box-shadow: 0 3px 3px 0 rgb(15, 109, 2);
        animation: spin 1.5s linear infinite
      }

    </style>
    <div id="nb-global-spinner" class="spinner">
      <div class="blob blob-0"></div>
      <div class="blob blob-1"></div>
      <div class="blob blob-2"></div>
      <div class="blob blob-3"></div>
      <div class="blob blob-4"></div>
      <div class="blob blob-5"></div>
    </div>
</body>

</html>

Answer 1

您应将微调器放在app-root元素内。应用程序完成加载后，它将由Angular应用程序替换：

<body>
  <app-root>
    <!-- The spinner content goes here -->
  </app-root>
</body>

要在加载特定视图时显示微调器，可以将其包装在微调器组件中：

import { Component } from '@angular/core';

@Component({
  selector: 'spinner',
  template: `
    <style>
      ...
    </style>
    <div id="nb-global-spinner" class="spinner">
      ...
    </div>  
  `,
})
export class SpinnerComponent { }

并将其添加到适当的模块中

...
import { HomeComponent } from './home.component';
import { SpinnerComponent } from './spinner.component';

@NgModule({
  declarations: [ 
    ...
    HomeComponent,
    SpinnerComponent
  ],
  ...
})
export class MyModule { }

在目标页面模板（例如home.component.html）中，您可以使用ngIf ... else指令在页面仍处于加载状态时显示微调组件：

<div *ngIf="isDataReady; else spinner">
  <!-- Normal page template here -->
</div>
<ng-template #spinner>
  <spinner></spinner>
</ng-template>

有关演示，请参见this stackblitz。加载首页数据时显示微调框。

Answer 2

最好的方法是订阅Router事件并相应地设置微调器。

请查看图片以获取更多信息。

您可以在this.loading = true时显示微调框，只需在app.component.html文件中使用* ngIf。

如何在以角度加载新页面之前添加微调器？

2 个答案: