दिलचस्प पोस्ट
विंडोज़ के तहत PHP पहुंच नेटवर्क पथ मेरे एंड्रॉइड ऐप में पाठ को कैसे प्रतिलिपि करें? क्यों MVVM का उपयोग करें? मैं स्विफ्ट में एरेज़ को कैसे जोड़ या मर्ज कर सकता हूं? Regexp ईमेल पते की पहचान मुश्किल है? टच इवेंट को अनदेखा कैसे करें और उन्हें अन्य सबव्यू के UIControl ऑब्जेक्ट में पास करें? जेनकिंस में नौकरी कैसे निर्धारित करें? रीजक्स के साथ पाठ में यूयूआईडी की खोज ऑब्जेक्ट के भीतर ऑब्जेक्ट प्रॉपर्टी एक्सेस करें किसी टैब कंट्रोलोल में टैब आइटम्स के भीतर कंट्रोल स्टेट को संरक्षित कैसे करें एक संग्रहीत प्रक्रिया पैरामीटर सूची में किसी अभिव्यक्ति के परिणाम (जैसे फ़ंक्शन कॉल) का उपयोग करना? STD :: फ़ंक्शन कैसे कार्यान्वित है? कैसे विंडोज फार्म का उपयोग कर एक जादू वर्ग बनाने के लिए? Argparse के साथ बुलियन मानों को पार्स करना क्या मैं कभी वर्दी बफर या शेडर स्टोरेज बफर ऑब्जेक्ट के अंदर `vec3` का उपयोग करूँ?

कोनेर 2 में मार्गों के बीच नेविगेट करते समय लोडिंग स्क्रीन दिखाएं

जब मैं किसी मार्ग को कोनेर 2 में बदलता हूं तो मैं एक लोडिंग स्क्रीन कैसे दिखूं?

वेब के समाधान से एकत्रित समाधान "कोनेर 2 में मार्गों के बीच नेविगेट करते समय लोडिंग स्क्रीन दिखाएं"

वर्तमान कोणीय रूटर नेविगेशन ईवेंट प्रदान करता है आप इनसे सदस्यता ले सकते हैं और इसके अनुसार 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) { 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 – आपका मूल दृश्य

 <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 के NgZone और Renderer का फायदा उठा सकते हैं, जब हम स्पिनर की स्थिति को *ngIf , तो NgZone के परिवर्तन का पता लगाने से बाएं जाएगा। मैं इसे एनीमेशन चिकनी बनाने के लिए *ngIf या async पाइप का उपयोग करने के लिए मिला।

यह कुछ tweaks के साथ मेरे पिछले उत्तर के समान है:

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((event: RouterEvent) => { this._navigationInterceptor(event) }) } // 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> 

अद्यतन: 3 अब जबकि मैंने नए राउटर में अपग्रेड किया है, @ बोरिसलेमके का दृष्टिकोण काम नहीं करेगा यदि आप गार्ड को CanDeactivate कर सकते हैं मैं अपनी पुरानी विधि के लिए अपमानजनक हूँ, ie: यह उत्तर

UPDATE2 : नए राउटर में होने वाले राउटर की घटनाओं का वादा, और @ बोरिसलेम के नीचे (अब ऊपर) जवाब में स्पिनर के कार्यान्वयन के मुख्य पहलू को शामिल किया गया है, मैंने इसका परीक्षण नहीं किया है, लेकिन मैं इसे सुझाता हूं।

UPDATE1: मैंने यह जवाब Old-Router के युग में लिखा था, जब केवल एक ईवेंट route-changed उपयोग किया गया था Old-Router माध्यम से अधिसूचित किया route-changedrouter.subscribe() । मुझे नीचे दिए गए दृष्टिकोण के अधिभार भी महसूस हुआ और केवल router.subscribe() का उपयोग करके ऐसा करने की कोशिश की, और यह उलझा हुआ क्योंकि canceled navigation का पता लगाने का कोई तरीका नहीं था। इसलिए मुझे लंबा दृष्टिकोण (दोहरे काम) पर वापस लौटना पड़ा


यदि आप अंगुलर 2 में अपना रास्ता जानते हैं, तो यही आपको आवश्यकता होगी


Boot.ts

 import {bootstrap} from '@angular/platform-browser-dynamic'; import {MyApp} from 'path/to/MyApp-Component'; import { SpinnerService} from 'path/to/spinner-service'; bootstrap(MyApp, [SpinnerService]); 

रूट घटक- (MyApp)

 import { Component } from '@angular/core'; import { SpinnerComponent} from 'path/to/spinner-component'; @Component({ selector: 'my-app', directives: [SpinnerComponent], template: ` <spinner-component></spinner-component> <router-outlet></router-outlet> ` }) export class MyApp { } 

स्पिनर-घटक (सक्रिय अनुसार तदनुसार मूल्य बदलने के लिए स्पिनर-सेवा की सदस्यता लेंगे)

 import {Component} from '@angular/core'; import { SpinnerService} from 'path/to/spinner-service'; @Component({ selector: 'spinner-component', 'template': '<div *ngIf="active" class="spinner loading"></div>' }) export class SpinnerComponent { public active: boolean; public constructor(spinner: SpinnerService) { spinner.status.subscribe((status: boolean) => { this.active = status; }); } } 

स्पिनर सेवा (इस सेवा बूटस्ट्रैप)

परिवर्तन पर स्थिति बदलने के लिए स्पिनर-घटक द्वारा सब्सक्राइब किए जाने के लिए एक अवलोकन के लिए परिभाषित करें, और स्पिनर सक्रिय / निष्क्रिय को जानने और सेट करने के लिए कार्य।

 import {Injectable} from '@angular/core'; import {Subject} from 'rxjs/Subject'; import 'rxjs/add/operator/share'; @Injectable() export class SpinnerService { public status: Subject<boolean> = new Subject(); private _active: boolean = false; public get active(): boolean { return this._active; } public set active(v: boolean) { this._active = v; this.status.next(v); } public start(): void { this.active = true; } public stop(): void { this.active = false; } } 

सभी अन्य मार्ग 'घटक

(नमूना):

 import { Component} from '@angular/core'; import { SpinnerService} from 'path/to/spinner-service'; @Component({ template: `<div *ngIf="!spinner.active" id="container">Nothing is Loading Now</div>` }) export class SampleComponent { constructor(public spinner: SpinnerService){} ngOnInit(){ this.spinner.stop(); // or do it on some other event eg: when xmlhttp request completes loading data for the component } ngOnDestroy(){ this.spinner.start(); } } 

क्यों न सिर्फ सरल सीएसएस का उपयोग करें:

 <router-outlet></router-outlet> <div class="loading"></div> 

और अपनी शैली में:

 div.loading{ height: 100px; background-color: red; display: none; } router-outlet + div.loading{ display: block; } 

या यहां तक ​​कि हम पहले जवाब के लिए ऐसा कर सकते हैं:

 <router-outlet></router-outlet> <spinner-component></spinner-component> 

और फिर बस बस

 spinner-component{ display:none; } router-outlet + spinner-component{ display: block; } 

ये चाल यहां है, नए मार्ग और घटकों को हमेशा राउटर आउटलेट के बाद दिखाई देगा, इसलिए एक सरल सीएसएस चयनकर्ता के साथ हम लोडिंग को दिखा और छिपा सकते हैं।