वर्तमान कोणीय राउटर नेविगेशन इवेंट प्रदान करता है। आप इनकी सदस्यता ले सकते हैं और तदनुसार 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सशर्त स्पिनर को दिखाने के लिए, हम कोणीय का लाभ उठाने सकता है NgZoneऔर Rendererपर स्विच / स्पिनर जो कोणीय के परिवर्तन का पता लगाने बाईपास जब हम स्पिनर की राज्य बदल जाएगा बंद। मुझे यह प्रयोग करने *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>