Kaip sukurti daugkartinį pakrovimo rodiklį kampiniams projektams

Pakartotinis naudojimas . Žodis, kuris pastaruoju metu kelis kartus kilo mano galvoje, dirbant „Angular“ projektą. Nusprendžiau susikurti savo „Angular“ daugkartinius įrankius ir tinklaraštį apie patirtį.

Taigi, kas yra apkrovos rodiklis? Paprastai tai yra tam tikro tipo suktukas su perdanga, kuris apsaugo nuo vartotojo sąveikos. NS negalima spustelėti, o dėmesys įstrigęs. Todėl vartotojas negali atsitiktinai mutuoti duomenų ar programos būsenos, sąveikaudamas su įvestimis už perdangos.

Sustojus krovimui, perdanga su suktuku pašalinama iš DOM ir anksčiau sutelktas elementas vėl fokusuojamas.

Pradėjau nuo logikos, kuri suveiks suktuką. Tam naudojau paprastą „BehaviorSubject“ ir dvi dekoratoriaus funkcijas:

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

Tokiu būdu mums nereikia švirkščiamos paslaugos, kad suaktyvintume ar sustabdytume suktuką. Du paprasti dekoratorių metodai tiesiog skambina .next () mūsų „BehaviorSubject“. Kintamasis „isLoading $“ eksportuojamas kaip stebimas.

Panaudokime jį mūsų pakrovimo rodiklio komponente.

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

Dabar šablone galite naudoti „isLoading $ getter“ su asinchroniniu vamzdžiu, kad parodytumėte / paslėptumėte visą perdangą.

Kaip matote, aš ištraukiau suktuką į savo komponentą ir padariau keletą kitų dalykų. Pridėjau šiek tiek dėmesio sutelkimo logikos ir galimybę konfigūruoti suktuko dydį ir spalvą naudojant „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'); 

Konfigūravimo objektų pateikimas naudojant „InjectionToken“ yra geras būdas pateikti konfigūruojamas ypatybes konstruktoriuje.

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

Dabar turime viską susieti į „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}] }; } }

Pastatę biblioteką ir įdiegę ją į „Angular“ programą, sukiklį suveikti tampa labai lengva naudojant du dekoratoriaus metodus.

Pirmiausia turime pridėti komponentą į tinkamą DOM vietą. Aš paprastai dedu jį į programos įvesties komponentą, į šablono apačią.

Loading indicator

START LOADING

Kaip matote, metodas triggerLoadingIndicator iškviečiamas spustelėjus mygtuką. Šis metodas yra dekoruotas:

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

Ir viskas. Žinoma, tikroje programoje ją galima būtų panaudoti norint papuošti užklausas ir jų atsakymų tvarkytuvus. Trumpas patarimas: papuoškite ir klaidų tvarkytuvus. :)

Labai ačiū, kad skaitėte šį tinklaraščio įrašą. Jei norite išbandyti aukščiau minėtą lib out, paketą ir instrukcijas, kaip jį įdiegti, rasite čia.

Taip pat galite sekti mane „Twitter“ ar „GitHub“.