Вимоги: HTTP-запити — це дуже трудомісткий процес: коли користувач подає форму на фронтенді, бекенд потребує різних перевірок, а потім постійної бази даних, і дані передаються по мережі. Коли користувач надсилає форму, миВи не хочете, щоб користувач міг натискати на будь-яку дію в інтерфейсі (або не хочеться постійно натискати Надіслати)。 Нам потрібна анімація для глобального завантаження.
ng-http-loader Цей пакет містить блокувач HTTP і деякі компоненти спінера (наразі всі з SpinKit). HTTP-блокувальник слухає всі HTTP-запити та відображає індикатор ротатора/завантажувача під час очікуваних HTTP-запитів.
Адреса NPM:Вхід за гіперпосиланням видно.
Адреса GitHub:Вхід за гіперпосиланням видно.
Встановіть відповідну версію ng-http-loader відповідно до вашої версії Angular, взявши версію Angular 17 як приклад, команда встановлення виглядає так:
Оскільки я є окремим компонентом, я змінив app.config.ts наступним чином:
Тим часом компонент app.component.ts модифікується наступним чином:
Нарешті, змініть код app.component.html наступним чином:
Зображення такі:
Для інформації про ефекти завантаження стилю анімації, будь ласка, зверніться до наступного:
експортний конст Spinkit = {
skChasingDots: 'sk-chasing-dots',
skCubeGrid: 'sk-cube-grid',
skDoubleBounce: 'sk-double-bounce',
skRotatingPlane: 'sk-rotg-площина',
skSpinnerPulse: 'sk-spinner-pulse',
skThreeBounce: 'ск-три-стрибок',
skWanderingCubes: 'sk-wandering-cubes',
skWave: 'sk-wave'
};
|
Опубліковано 10.06.2024 15:09:56
|
|
|
|
