如何在Angular中在加载新页面之前添加旋转器？

Question

如何在Angular中在加载新页面之前添加旋转器？

3

所以我想像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>

- Patrick

2个回答

0

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

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

当 this.loading = true 时，您可以在 app.component.html 文件中使用 *ngIf 来显示 spinner。

- Tibin Thomas

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ConnorsFan · Accepted Answer

您应该将Spinner放置在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指令来显示Spinner组件，同时页面仍在加载中：

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

查看此 StackBlitz以获取演示。主页数据加载时会显示旋转器。