Krav: HTTP-förfrågningar är en mycket tidskrävande process; när en användare skickar in ett formulär i frontend behöver backend olika kontroller och sedan en persistent databas, och datan överförs över nätverket. När en användare skickar in ett formulär, viDu vill inte att användaren ska kunna klicka på någon åtgärd i gränssnittet (eller så vill du inte klicka på Skicka upprepade gånger)。 Vi behöver en animation för global laddning.
ng-http-loader Detta paket tillhandahåller en HTTP-blockerare och några spinnerkomponenter (alla från SpinKit för tillfället). HTTP-blockeraren lyssnar efter alla HTTP-förfrågningar och visar en rotator-/loaderindikator under väntande HTTP-förfrågningar.
NPM-adress:Inloggningen med hyperlänken är synlig.
GitHub-adress:Inloggningen med hyperlänken är synlig.
Installera lämplig ng-http-loader-version enligt din Angular-version, med Angular 17-versionen som exempel, installationskommandot är följande:
Eftersom jag är en fristående komponent modifierade jag app.config.ts enligt följande:
Samtidigt modifieras app.component.ts komponenten enligt följande:
Slutligen, modifiera app.component.html-koden enligt följande:
Renderingarna är följande:
För information om hur man laddar animationsstilseffekter, vänligen se följande:
export const Spinkit = {
skChasingDots: 'sk-chasing-dots',
skCubeGrid: 'sk-cube-grid',
skDoubleBounce: 'sk-double-bounce',
skRotatingPlane: 'sk-rotationg-plane',
skSpinnerPulse: 'sk-spinner-pulse',
skThreeBounce: 'sk-tre-bounce',
skWanderingCubes: 'sk-wandering-cubes',
skWave: 'sk-wave'
};
|
Publicerad på 2024-06-10 15:09:56
|
|
|
|
