在将整个数据加载到 Angular 之前，如何显示 ngx-spinner答案

【问题标题】：How can i show ngx-spinner until my whole data is loaded in Angular在将整个数据加载到 Angular 之前，如何显示 ngx-spinner
【发布时间】：2021-04-29 17:52:13
【问题描述】：

我在每个页眉上都有 - 图片和文字。有时图像加载缓慢，文本显示，1-2 秒后标题图像显示在应有的位置，这不是良好的用户体验。在组件中的全部数据 - 作为路由加载完成之前，如何显示我的 ngx-spinner？

我尝试过的 - app.component.ts

import { Component } from '@angular/core';
import { NgxSpinnerService } from 'ngx-spinner';

import {
  Router,
  // import as RouterEvent to avoid confusion with the DOM Event
  Event as RouterEvent,
  NavigationStart,
  NavigationEnd,
  NavigationCancel,
  NavigationError
} from '@angular/router'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'my-app';

  loading = true;

  constructor(private spinner: NgxSpinnerService, private router: Router) {
    this.router.events.subscribe((e: RouterEvent) => {
      this.navigationInterceptor(e);
    })
  }

  ngOnInit() {

  }

  navigationInterceptor(event: RouterEvent): void {
    if (event instanceof NavigationStart) {
      this.loading = true;
      this.spinner.show();
      console.log(1111);
    }
    if (event instanceof NavigationEnd) {
      this.loading = false;
      this.spinner.hide();
    }
    // Set loading state to false in both of the below events to hide the spinner in case a request fails
    if (event instanceof NavigationCancel) {
      this.loading = false;
      this.spinner.hide();
    }
    if (event instanceof NavigationError) {
      this.loading = false;
      this.spinner.hide();
    }
  }


}

应用组件 html

<ngx-spinner bdColor="rgba(51,51,51,0.8)" size="medium" color="#fff" type="ball-scale-multiple">
  <p style="font-size: 20px; color: white">Loading...</p>
</ngx-spinner>

但它不起作用。当我的路线正在变化并且组件在那里渲染时，我没有得到 Spinenr

【问题讨论】：

加载数据功能在哪里？
ngx-spinner 有 show - hide 方法，可以在后台实现。
我的意思是，加载数据的函数在哪里，你想在数据加载的同时显示微调器。

标签： angular ngx-spinner

【解决方案1】：

尝试为此使用生命周期挂钩。使用路由器事件我们无法定义组件是否完全加载。对于这种情况你可以ngAfterViewInit生命周期。

检查以下网站作为参考

https://angular.io/guide/lifecycle-hooks

【讨论】：