我已经尝试了this solution,但无法让它发挥作用。我是Angular2的新手(不了解AngularJS)。加载屏幕没有显示,我想我需要添加一些时间,以便有时间显示,但我不知道在哪里和如何。
app .component.ts
import {Component} from '@angular/core';
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: ['./loadingCSS.css']
})
export class AppComponent {
// Sets initial value to true to show loading spinner on first load
loading = true;
constructor(private router: Router) {
router.events.subscribe((event: RouterEvent) => {
this.navigationInterceptor(event);
});
}
// Shows and hides the loading spinner during RouterEvent changes
navigationInterceptor(event: RouterEvent): void {
if (event instanceof NavigationStart) {
this.loading = true;
}
if (event instanceof NavigationEnd) {
this.loading = false;
}
// 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;
}
if (event instanceof NavigationError) {
this.loading = false;
}
}
的 app.component.html
<a [routerLink]="['/ArrayOP']"><button>Array operation</button></a>
<a [routerLink]="['/Calci']"><button>Calculator</button></a>
<div class="loading-overlay" *ngIf="loading">
Loading<span class="d">.</span><span class="d d-2">.</span><span class="d d-3">.</span>
</div>
<router-outlet></router-outlet>
我想实现加载屏幕显示在整个应用程序的每个路由中,而我正在尝试显示的加载屏幕是this(代码参考)。任何建议都会有很大的帮助。
答案 0 :(得分:1)
我找到了解决方案。如果有人将来需要它,请发布
这就是我所做的......我将setTimeout
功能添加到 app.component.ts 作为
import {
Component
} from '@angular/core';
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: ['./loadingCSS.css']
})
export class AppComponent {
// Sets initial value to true to show loading spinner on first load
loading = true;
constructor(private router: Router) {
router.events.subscribe((event: RouterEvent) => {
this.navigationInterceptor(event);
});
}
// Shows and hides the loading spinner during RouterEvent changes
navigationInterceptor(event: RouterEvent): void {
if (event instanceof NavigationStart) {
this.loading = true;
}
if (event instanceof NavigationEnd) {
setTimeout(() => { // here
this.loading = false;
}, 2000);
}
// Set loading state to false in both of the below events to hide the spinner in case a request fails
if (event instanceof NavigationCancel) {
setTimeout(() => { // here
this.loading = false;
}, 2000);
}
if (event instanceof NavigationError) {
setTimeout(() => { // here
this.loading = false;
}, 2000);
}
}
并将HTML改为
<div class="loading-overlay" *ngIf="loading">
Loading<span class="d">.</span><span class="d d-2">.</span><span class="d d-3">.</span>
</div>
<div *ngIf="!loading">
<router-outlet></router-outlet>
</div>
答案 1 :(得分:0)
设置的超时将起作用,但它不是正确的工作方式,因为如果从一条路由切换到另一条路由时,它仍然会显示数据延迟。为了获得更好的结果,请不要使用设置的超时时间