Как да създадете индикатор за зареждане за многократна употреба за Angular проекти

Многократна употреба . Дума, която ми е минавала през ума няколко пъти напоследък, докато работя по Angular проект. Реших да създам свои собствени повторно използваеми Angular и блог за преживяването.

И така, какво точно представлява индикаторът за зареждане? Обикновено това е въртяща машина от някакъв вид с наслагване, което предотвратява потребителските взаимодействия. Потребителският интерфейс не може да се кликва и фокусът е в капан. Следователно потребителят не може случайно да мутира данните или състоянието на приложението, като взаимодейства с входове зад наслагването.

След спиране на натоварването, наслагването с предене се отстранява от DOM и предишният фокусиран елемент се фокусира отново.

Започнах с логиката, която би задействала въртенето. За това използвах проста BehaviourSubject и две функции декоратор:

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 () в нашия BehaviourSubject. Променливата isLoading $ се експортира като наблюдаема.

Нека го използваме в нашия компонент за индикатор за зареждане.

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

Сега във вашия шаблон можете да използвате вашия isLoading $ getter с асинхронната тръба, за да покажете / скриете цялото наслагване.

Както можете да видите, извадих спинъра в собствения му компонент и направих няколко други неща. Добавих малко логика за улавяне на фокуса и възможността да конфигурирам размера и цвета на въртящия механизъм с помощта на 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.