|
|
Veröffentlicht am 10.06.2024 15:09:56
|
|
|
|
Anforderungen: HTTP-Anfragen sind ein sehr zeitaufwändiger Prozess; wenn ein Benutzer ein Formular im Frontend einreicht, benötigt das Backend verschiedene Prüfungen und anschließend eine persistente Datenbank, und die Daten werden über das Netzwerk übertragen. Wenn ein Nutzer ein Formular einreicht, werden wirDu möchtest nicht, dass der Nutzer auf irgendeine Aktion in der Benutzeroberfläche klicken kann (oder du willst nicht wiederholt auf Absenden klicken).。 Wir brauchen eine Animation für das globale Laden.
ng-http-loader Dieses Paket stellt einen HTTP-Blocker und einige Spinner-Komponenten bereit (vorerst alle aus SpinKit). Der HTTP-Blocker hört alle HTTP-Anfragen ab und zeigt während ausstehender HTTP-Anfragen einen Rotator-/Loader-Indikator an.
NPM-Adresse:Der Hyperlink-Login ist sichtbar.
GitHub-Adresse:Der Hyperlink-Login ist sichtbar.
Installiere die passende ng-http-loader-Version gemäß deiner Angular-Version, nehmen wir die Angular 17-Version als Beispiel, der Installationsbefehl lautet wie folgt:
Da ich eine eigenständige Komponente bin, habe ich app.config.ts wie folgt modifiziert:
Inzwischen wird die app.component.ts-Komponente wie folgt modifiziert:
Abschließend wird der app.component.html-Code wie folgt modifiziert:
Die Darstellungen sind wie folgt:
Für Informationen zum Laden von Animationsstil-Effekten siehe bitte Folgendes:
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-drei-bounce',
skWanderingCubes: 'sk-wandering-cubes',
skWave: 'sk-wave'
};
|
Vorhergehend:Angular 17 Serie (achtzehn) ForkJoin wartet auf mehrere parallele HTTP-AnfragenNächster:C#/.NET verwendet SequenceEqual, um zu vergleichen, ob zwei Mengen gleich sind
|
