Vereisten: HTTP-verzoeken zijn een zeer tijdrovend proces; wanneer een gebruiker een formulier indient op de frontend, heeft de backend verschillende controles nodig en vervolgens een persistente database, waarna de data via het netwerk wordt verzonden. Wanneer een gebruiker een formulier indient, wijJe wilt niet dat de gebruiker op een actie in de interface kan klikken (of je wilt niet steeds op Verzenden klikken).。 We hebben een animatie nodig voor globale lading.
ng-http-loader Dit pakket biedt een HTTP-blokker en enkele spinnercomponenten (allemaal voorlopig afkomstig van SpinKit). De HTTP-blokker luistert naar alle HTTP-verzoeken en toont een rotator/loader-indicator tijdens wachtende HTTP-verzoeken.
NPM-adres:De hyperlink-login is zichtbaar.
GitHub-adres:De hyperlink-login is zichtbaar.
Installeer de juiste ng-http-loader-versie volgens je Angular-versie, waarbij je de Angular 17-versie als voorbeeld neemt, het installatiecommando is als volgt:
Omdat ik een losstaand component ben, heb ik app.config.ts als volgt aangepast:
Ondertussen is de app.component.ts component als volgt aangepast:
Tot slot wijzig je de app.component.html code als volgt:
De renderings zijn als volgt:
Voor informatie over het laden van animatiestijl-effecten, zie het volgende:
export const Spinkit = {
skChasingDots: 'sk-chasing-dots',
skCubeGrid: 'sk-cube-grid',
skDoubleBounce: 'sk-dubbel-bounce',
skRotatingPlane: 'sk-rotationg-plane',
skSpinnerPulse: 'sk-spinner-pulse',
skThreeBounce: 'sk-drie-bounce',
skWanderingCubes: 'sk-wandering-cubes',
skWave: 'sk-wave'
};
|
Geplaatst op 10-06-2024 15:09:56
|
|
|
|
