Requisitos: As requisições HTTP são um processo muito demorado, quando um usuário envia um formulário no frontend, o backend precisa de várias verificações e depois um banco de dados persistente, e os dados são transmitidos pela rede. Quando um usuário envia um formulário, nósVocê não quer que o usuário consiga clicar em nenhuma ação da interface (ou não quer clicar repetidamente em Enviar)。 Precisamos de uma animação para carregamento global.
ng-http-loader Este pacote fornece um bloqueador HTTP e alguns componentes spinner (todos do SpinKit por enquanto). O bloqueador HTTP escuta todas as requisições HTTP e exibe um indicador de rotador/carregador durante as requisições HTTP pendentes.
Endereço do NPM:O login do hiperlink está visível.
Endereço do GitHub:O login do hiperlink está visível.
Instale a versão ng-http-loader apropriada de acordo com sua versão Angular, tomando a versão Angular 17 como exemplo, o comando installation é o seguinte:
Como sou um componente independente, modifiquei app.config.ts da seguinte forma:
Enquanto isso, o componente app.component.ts é modificado da seguinte forma:
Por fim, modifique o código app.component.html da seguinte forma:
As renderizações são as seguintes:
Para informações sobre efeitos de estilo de animação de carregamento, consulte o seguinte:
export const Spinkit = {
skChasingDots: 'sk-persigo-pontos',
skCubeGrid: 'sk-cube-grade',
skDoubleBounce: 'sk-duplo-quique',
skRotatingPlan: 'sk-rotationg-plane',
skSpinnerPulse: 'sk-spinner-pulse',
skThreeBounce: 'sk-três-quicando',
skWanderingCubes: 'sk-errantes-cubos',
skWave: 'sk-wave'
};
|
Publicado em 10/06/2024 15:09:56
|
|
|
|
