如何在 angular 中加载新页面之前添加微调器？

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

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

详情请看图片

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

如何在 angular 中加载新页面之前添加微调器？

How to add a spinner before loading a new page in angular?

html

ngx-bootstrap

angular