Krav: HTTP-forespørgsler er en meget tidskrævende proces; når en bruger indsender en formular på frontend, kræver backenden forskellige kontroller og derefter en persistent database, og dataene overføres over netværket. Når en bruger indsender en formular, gør viDu ønsker ikke, at brugeren skal kunne klikke på nogen handling i interfacet (eller du vil ikke gentagne gange klikke på Send).。 Vi har brug for en animation til global indlæsning.
ng-http-loader Denne pakke leverer en HTTP-blokker og nogle spinnerkomponenter (alle fra SpinKit for nu). HTTP-blokkeren lytter efter alle HTTP-forespørgsler og viser en rotator/loader-indikator under ventende HTTP-forespørgsler.
NPM-adresse:Hyperlink-login er synlig.
GitHub-adresse:Hyperlink-login er synlig.
Installer den passende ng-http-loader-version i henhold til din Angular-version, og tag Angular 17-versionen som eksempel, installationskommandoen er som følger:
Da jeg er en selvstændig komponent, har jeg modificeret app.config.ts som følger:
Samtidig modificeres app.component.ts-komponenten som følger:
Til sidst skal app.component.html-koden ændres som følger:
Renderingerne er som følger:
For information om indlæsning af animationsstil-effekter, henvises til følgende:
eksport 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-hop',
skWanderingCubes: 'sk-wandering-cubes',
skWave: 'sk-wave'
};
|
Opslået på 10/06/2024 15.09.56
|
|
|
|
