Requisitos: Las solicitudes HTTP son un proceso muy laborioso; cuando un usuario envía un formulario en el frontend, el backend necesita varias comprobaciones y luego una base de datos persistente, y los datos se transmiten a través de la red. Cuando un usuario envía un formulario, nosotrosNo quieres que el usuario pueda hacer clic en ninguna acción de la interfaz (o no quieres tener que hacer clic repetidamente en Enviar).。 Necesitamos una animación para la carga global.
ng-http-loader Este paquete proporciona un bloqueador HTTP y algunos componentes de spinner (todos de SpinKit por ahora). El bloqueador HTTP escucha todas las solicitudes HTTP y muestra un indicador de rotador/cargador durante las solicitudes HTTP pendientes.
Dirección NPM:El inicio de sesión del hipervínculo es visible.
Dirección de GitHub:El inicio de sesión del hipervínculo es visible.
Instala la versión ng-http-loader adecuada según tu versión de Angular, tomando como ejemplo la versión de Angular 17, el comando de instalación es el siguiente:
Como soy un componente independiente, modifiqué app.config.ts de la siguiente manera:
Mientras tanto, el componente app.component.ts se modifica de la siguiente manera:
Finalmente, modifica el código app.component.html de la siguiente manera:
Las representaciones son las siguientes:
Para información sobre cómo cargar efectos de estilo de animación, consulte lo siguiente:
export const Spinkit = {
skChasingDots: 'sk-persiguiendo-puntos',
skCubeGrid: 'sk-cube-grid',
skDoubleBounce: 'sk-doble-rebote',
skRotatingPlan: 'sk-rotationg-plane',
skSpinnerPulse: 'sk-spinner-pulse',
skThreeBounce: 'sk-tres-rebote',
skWanderingCubes: 'sk-cubos-errantes',
skWave: 'sk-wave'
};
|
Publicado en 10/6/2024 15:09:56
|
|
|
|
