বর্তমান কৌণিক রাউটার নেভিগেশন ইভেন্টগুলি সরবরাহ করে। আপনি এগুলিতে সাবস্ক্রাইব করতে পারেন এবং সেই অনুযায়ী ইউআই পরিবর্তন করতে পারেন। যেমন অন্যান্য ঘটনা গণনা করতে মনে রাখুন NavigationCancelএবং NavigationErrorক্ষেত্রে আপনার স্পিনার থামাতে রাউটার ট্রানজিশন ব্যর্থ হয়।
app.componal.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.componal.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.componal.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.componal.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>