我怎么才能显示ngx-spinner，直到我的所有数据都加载到Angular中

Question

我在每个页面的标题-图像和文本。有时图像加载缓慢，文本显示，1-2秒后，标题图像显示在它应该出现的地方，这不是很好的用户体验。我怎么才能显示我的ngx旋转器，直到我的组件加载为路由的全部数据完成?

what i tried - 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();
}
}

}

app component 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

Answer 1

尝试使用生命周期钩子。通过使用router事件，我们不能定义组件是否完全加载。在这种情况下，你可以ngafterviewit生命周期。

查看以下站点作为参考

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