Krav: HTTP-forespørsler er en svært tidkrevende prosess; når en bruker sender inn et skjema på frontend, trenger backend ulike kontroller og deretter en vedvarende database, og dataene overføres over nettverket. Når en bruker sender inn et skjema, viDu vil ikke at brukeren skal kunne klikke på noen handling i grensesnittet (eller du vil ikke klikke på Send flere ganger)。 Vi trenger en animasjon for global lasting.
ng-http-loader Denne pakken tilbyr en HTTP-blokker og noen spinnerkomponenter (alle fra SpinKit foreløpig). HTTP-blokkeren lytter etter alle HTTP-forespørsler og viser en rotator/loader-indikator under ventende HTTP-forespørsler.
NPM-adresse:Innloggingen med hyperkoblingen er synlig.
GitHub-adresse:Innloggingen med hyperkoblingen er synlig.
Installer den riktige ng-http-loader-versjonen i henhold til din Angular-versjon, med Angular 17-versjonen som eksempel, er installasjonskommandoen som følger:
Siden jeg er en frittstående komponent, modifiserte jeg app.config.ts som følger:
Samtidig modifiseres app.component.ts komponenten som følger:
Til slutt, modifiser app.component.html-koden som følger:
Gjengivelsene er som følger:
For informasjon om lasting av animasjonsstil-effekter, vennligst se 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-bounce',
skWanderingCubes: 'sk-wandering-cubes',
skWave: 'sk-wave'
};
|
Publisert på 10.06.2024 15:09:56
|
|
|
|
