Hogyan hozzunk létre újrafelhasználható betöltési mutatót az Angular projektekhez

Újrafelhasználhatóság . Egy szó, amely az utóbbi időben többször is megfordult a fejemben, miközben egy Angular projekten dolgoztam. Úgy döntöttem, hogy létrehozok egy saját Angular újrafelhasználható cikket és blogot készítek az élményről.

Szóval, mi is pontosan a terhelés-mutató? Általában valamilyen fonógép van egy átfedéssel, amely megakadályozza a felhasználói interakciókat. A felhasználói felület nem kattintható, és a fókusz csapdába esik. Ezért a felhasználó nem mutathatja meg véletlenül az adatokat vagy az alkalmazás állapotát azáltal, hogy kölcsönhatásba lép a fedvény mögötti bemenetekkel.

A betöltés leállítása után a fonóval ellátott fedvény eltávolításra kerül a DOM-ból, és a korábban fókuszált elem ismét fókuszálódik.

Azzal a logikával kezdtem, amely kiváltja a fonót. Ehhez egy egyszerű BehaviorSubject és két dekoratőr funkciót használtam:

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; } 

Így nincs szükség injekciós szolgáltatásra a fonó beindításához vagy leállításához. A két egyszerű díszítő módszer csak a .next () parancsot hívja meg a BehaviorSubject-en. Az isLoading $ változó megfigyelhető módon kerül exportálásra.

Használjuk a terhelésjelző komponensünkben.

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

Most a sablon belsejében használhatja az isLoading $ getter fájlt az async csővel az egész fedvény megjelenítéséhez / elrejtéséhez.

Mint látható, kivontam a fonót a saját alkatrészébe, és számos más dolgot is elvégeztem. Hozzáadtam néhány logikát a fókuszcsapdázáshoz, valamint azt a lehetőséget, hogy az InjectionToken segítségével konfigurálhassam a fonó méretét és színét.

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'); 

Konfigurációs objektumok biztosítása az InjectionToken használatával jó lehetőség a konfigurálható tulajdonságok biztosítására a konstruktorban.

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

Most mindent össze kell csomagolnunk egy NgModule-ba:

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}] }; } }

A könyvtár felépítése és egy Angular alkalmazásba történő telepítése után a fonó elindítása rendkívül egyszerűvé válik a két díszítő módszerrel.

Először hozzá kell adnunk az összetevőt a DOM megfelelő helyéhez. Általában az alkalmazásbeviteli összetevőhöz, a sablon aljára teszem.

Loading indicator

START LOADING

Amint láthatja, a triggerLoadingIndicator metódust hívják meg, amikor a gombra kattintanak. Ez a módszer díszített módszer:

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

És ez az. Természetesen egy valódi alkalmazásban fel lehet használni a kérések és a hozzájuk tartozó válaszkezelők díszítésére. Gyors tipp: díszítse a hibakezelőket is. :)

Nagyon köszönöm, hogy elolvasta ezt a blogbejegyzést. Ha szeretné kipróbálni a fent említett lib out-ot, itt megtalálja a csomagot és a telepítéshez szükséges utasításokat.

Kövess engem a Twitteren vagy a GitHub-on is.