在我的整个数据被加载成角之前，我如何显示ngx旋转器？

Question

我有每一页的标题-图像和文字。有时图像加载缓慢，文本显示，在1-2秒后，heeader图像显示到它应该显示的地方，这是不好的用户体验。如何才能显示我的ngx旋转器，直到我的组件加载的整个数据作为路由组合起来？

我试过的- 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>

但这是行不通的。当我的路线在吟唱的时候，当我的路线在那里呈现时，我没有得到旋转的声音。

Answer 1

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

检查以下站点作为参考

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