Angular Router ปัจจุบันมีการนำทางเหตุการณ์ คุณสามารถสมัครรับข้อมูลเหล่านี้และทำการเปลี่ยนแปลง UI ได้ อย่าลืมนับในเหตุการณ์อื่น ๆ เช่นNavigationCancelและNavigationErrorหยุดสปินเนอร์ของคุณในกรณีที่การเปลี่ยนเราเตอร์ล้มเหลว
app.component.ts - องค์ประกอบรากของคุณ
...
import {
Router,
// import as RouterEvent to avoid confusion with the DOM Event
Event as RouterEvent,
NavigationStart,
NavigationEnd,
NavigationCancel,
NavigationError
} from '@angular/router'
@Component({})
export class AppComponent {
// Sets initial value to true to show loading spinner on first load
loading = true
constructor(private router: Router) {
this.router.events.subscribe((e : RouterEvent) => {
this.navigationInterceptor(e);
})
}
// 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 - มุมมองรากของคุณ
<div class="loading-overlay" *ngIf="loading">
<!-- show something fancy here, here with Angular 2 Material's loading bar or circle -->
<md-progress-bar mode="indeterminate"></md-progress-bar>
</div>
คำตอบที่ได้รับการปรับปรุงประสิทธิภาพ : หากคุณสนใจเกี่ยวกับประสิทธิภาพมีวิธีการที่ดีกว่าการใช้งานจะน่าเบื่อกว่าเล็กน้อย แต่การปรับปรุงประสิทธิภาพจะคุ้มค่ากับการทำงานพิเศษ แทนที่จะใช้*ngIfเพื่อแสดงสปินเนอร์ตามเงื่อนไขเราสามารถใช้ประโยชน์จาก Angular NgZoneและRendererเพื่อเปิด / ปิดสปินเนอร์ซึ่งจะข้ามการตรวจจับการเปลี่ยนแปลงของ Angular เมื่อเราเปลี่ยนสถานะของสปินเนอร์ ฉันพบว่าสิ่งนี้ทำให้ภาพเคลื่อนไหวราบรื่นขึ้นเมื่อเทียบกับการใช้*ngIfหรือasyncไปป์
สิ่งนี้คล้ายกับคำตอบก่อนหน้าของฉันที่มีการปรับแต่งบางอย่าง:
app.component.ts - องค์ประกอบรากของคุณ
...
import {
Router,
// import as RouterEvent to avoid confusion with the DOM Event
Event as RouterEvent,
NavigationStart,
NavigationEnd,
NavigationCancel,
NavigationError
} from '@angular/router'
import {NgZone, Renderer, ElementRef, ViewChild} from '@angular/core'
@Component({})
export class AppComponent {
// Instead of holding a boolean value for whether the spinner
// should show or not, we store a reference to the spinner element,
// see template snippet below this script
@ViewChild('spinnerElement')
spinnerElement: ElementRef
constructor(private router: Router,
private ngZone: NgZone,
private renderer: Renderer) {
router.events.subscribe(this._navigationInterceptor)
}
// Shows and hides the loading spinner during RouterEvent changes
private _navigationInterceptor(event: RouterEvent): void {
if (event instanceof NavigationStart) {
// We wanna run this function outside of Angular's zone to
// bypass change detection
this.ngZone.runOutsideAngular(() => {
// For simplicity we are going to turn opacity on / off
// you could add/remove a class for more advanced styling
// and enter/leave animation of the spinner
this.renderer.setElementStyle(
this.spinnerElement.nativeElement,
'opacity',
'1'
)
})
}
if (event instanceof NavigationEnd) {
this._hideSpinner()
}
// 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._hideSpinner()
}
if (event instanceof NavigationError) {
this._hideSpinner()
}
}
private _hideSpinner(): void {
// We wanna run this function outside of Angular's zone to
// bypass change detection,
this.ngZone.runOutsideAngular(() => {
// For simplicity we are going to turn opacity on / off
// you could add/remove a class for more advanced styling
// and enter/leave animation of the spinner
this.renderer.setElementStyle(
this.spinnerElement.nativeElement,
'opacity',
'0'
)
})
}
}
app.component.html - มุมมองรากของคุณ
<div class="loading-overlay" #spinnerElement style="opacity: 0;">
<!-- md-spinner is short for <md-progress-circle mode="indeterminate"></md-progress-circle> -->
<md-spinner></md-spinner>
</div>