Πώς να δημιουργήσετε έναν επαναχρησιμοποιήσιμο δείκτη φόρτωσης για γωνιακά έργα

Επαναχρησιμοποίηση . Μια λέξη που μου πέρασε πρόσφατα αρκετές φορές, ενώ εργαζόμουν σε ένα έργο Angular. Αποφάσισα να δημιουργήσω το δικό μου Angular reusables και blog για την εμπειρία.

Λοιπόν, τι ακριβώς είναι ένας δείκτης φόρτωσης; Συνήθως, είναι ένα είδος περιστροφής με μια επικάλυψη, η οποία αποτρέπει τις αλληλεπιδράσεις των χρηστών. Η διεπαφή χρήστη δεν έχει δυνατότητα κλικ και η εστίαση είναι παγιδευμένη. Επομένως, ο χρήστης δεν μπορεί να μεταλλάξει τα δεδομένα ή την κατάσταση της εφαρμογής κατά λάθος αλληλεπιδρώντας με εισόδους πίσω από την επικάλυψη.

Αφού σταματήσει η φόρτωση, η επικάλυψη με τον κλώστη αφαιρείται από το DOM και το στοιχείο που εστιάσθηκε προηγουμένως εστιάζεται ξανά.

Ξεκίνησα με τη λογική που θα πυροδότησε τον περιστρεφόμενο. Για αυτό χρησιμοποίησα μια απλή λειτουργία BehaviorSubject και δύο διακοσμητές:

import {BehaviorSubject} from 'rxjs'; import {distinctUntilChanged} from 'rxjs/operators'; const indicatorSubject = new BehaviorSubject(false); export const isLoading$ = indicatorSubject.asObservable().pipe(distinctUntilChanged()); export function startLoadingIndicator(target: any, propertyKey: string | symbol, propertyDescriptor: PropertyDescriptor): any { const original = propertyDescriptor.value; propertyDescriptor.value = (...args) => { indicatorSubject.next(true); const result = original.call(target, ...args); return result; }; return propertyDescriptor; } export function stopLoadingIndicator(target: any, propertyKey: string, propertyDescriptor: PropertyDescriptor): any { const original = propertyDescriptor.value; propertyDescriptor.value = (...args) => { indicatorSubject.next(false); const result = original.call(target, ...args); return result; }; return propertyDescriptor; } 

Με αυτόν τον τρόπο, δεν χρειαζόμαστε μια ενέσιμη υπηρεσία για ενεργοποίηση ή διακοπή του περιστρεφόμενου. Οι δύο απλές μέθοδοι διακόσμησης καλούν μόνο το .next () στο BehaviorSubject. Η μεταβλητή isLoading $ εξάγεται ως παρατηρήσιμο.

Ας το χρησιμοποιήσουμε στο στοιχείο δείκτη φόρτωσης.

get isLoading$(): Observable { return isLoading$; }

Τώρα μέσα στο πρότυπό σας, μπορείτε να χρησιμοποιήσετε το isLoading $ getter με το σωλήνα async για εμφάνιση / απόκρυψη ολόκληρης της επικάλυψης.

Όπως βλέπετε, έβγαλα τον κλώστη στο δικό του στοιχείο και έχω κάνει πολλά άλλα πράγματα. Πρόσθεσα κάποια λογική για την παγίδευση εστίασης και τη δυνατότητα διαμόρφωσης του μεγέθους και του χρώματος του κλώστη χρησιμοποιώντας ένα InjectionToken.

import {LoadingIndicatorConfig} from './interfaces/loading-indicator.interfaces'; import {InjectionToken} from '@angular/core'; export const DEFAULT_CONFIG: LoadingIndicatorConfig = { size: 160, color: '#7B1FA2' }; export const LOADING_INDICATOR_CONFIG: InjectionToken = new InjectionToken('btp-li-conf'); 

Η παροχή αντικειμένων διαμόρφωσης χρησιμοποιώντας το InjectionToken είναι ένας καλός τρόπος για να παρέχετε διαμορφώσιμες ιδιότητες στον κατασκευαστή.

 constructor(@Inject(LOADING_INDICATOR_CONFIG) private config: LoadingIndicatorConfig) { }

Τώρα πρέπει να ομαδοποιήσουμε τα πάντα σε ένα NgModule:

import {ModuleWithProviders, NgModule} from '@angular/core'; import {LoadingIndicatorComponent} from './loading-indicator/loading-indicator.component'; import {CommonModule} from '@angular/common'; import {SpinnerComponent} from './spinner/spinner.component'; import {DEFAULT_CONFIG, LOADING_INDICATOR_CONFIG} from './loading-indicator.config'; @NgModule({ declarations: [LoadingIndicatorComponent, SpinnerComponent], imports: [ CommonModule ], exports: [LoadingIndicatorComponent] }) export class LoadingIndicatorModule { static forRoot(): ModuleWithProviders { return { ngModule: LoadingIndicatorModule, providers: [{provide: LOADING_INDICATOR_CONFIG, useValue: DEFAULT_CONFIG}] }; } }

Μετά την κατασκευή της βιβλιοθήκης και την εγκατάστασή της σε μια γωνιακή εφαρμογή, η ενεργοποίηση του περιστρεφόμενου γίνεται εξαιρετικά εύκολη χρησιμοποιώντας τις δύο μεθόδους διακόσμησης.

Κατ 'αρχάς, πρέπει να προσθέσουμε το στοιχείο στη σωστή θέση στο DOM. Συνήθως το βάζω στο στοιχείο καταχώρησης της εφαρμογής, στο κάτω μέρος του προτύπου.

Loading indicator

START LOADING

Όπως μπορείτε να δείτε, η μέθοδος triggerLoadingIndicator καλείται όταν κάνετε κλικ στο κουμπί. Αυτή η μέθοδος είναι μια διακοσμημένη μέθοδος:

 @startLoadingIndicator triggerLoadingIndicator() { setTimeout(this.triggerLoadingIndicatorStop.bind(this), 500); } @stopLoadingIndicator triggerLoadingIndicatorStop() { console.log('stopped'); }

Και αυτό είναι. Φυσικά σε μια πραγματική εφαρμογή, κάποιος θα μπορούσε να το χρησιμοποιήσει για να διακοσμήσει αιτήματα και τους αντίστοιχους χειριστές απόκρισης. Μια γρήγορη συμβουλή: διακοσμήστε επίσης τους χειριστές σφαλμάτων σας. :)

Σας ευχαριστώ πολύ που διαβάσατε αυτήν την ανάρτηση ιστολογίου. Εάν θέλετε να δοκιμάσετε το παραπάνω lib, μπορείτε να βρείτε το πακέτο και τις οδηγίες για να το εγκαταστήσετε εδώ.

Μπορείτε επίσης να με ακολουθήσετε στο Twitter ή στο GitHub.