Požadavky: HTTP požadavky jsou velmi časově náročný proces, když uživatel zadá formulář na frontendu, backend potřebuje různé kontroly a poté trvalou databázi, a data jsou přenášena přes síť. Když uživatel odešle formulář, myNechcete, aby uživatel mohl kliknout na jakoukoli akci v rozhraní (nebo nechcete opakovaně klikat na Odeslat).。 Potřebujeme animaci pro globální načítání.
ng-http-loader Tento balíček poskytuje HTTP blokátor a některé komponenty spinneru (zatím vše ze SpinKitu). HTTP blokátor naslouchá všem HTTP požadavkům a zobrazuje indikátor rotátoru/loaderu během čekajících HTTP požadavků.
NPM adresa:Přihlášení k hypertextovému odkazu je viditelné.
Adresa GitHubu:Přihlášení k hypertextovému odkazu je viditelné.
Nainstalujte příslušnou verzi ng-http-loaderu podle vaší verze v Angularu, vezměte jako příklad verzi Angular 17, instalační příkaz je následující:
Jelikož jsem samostatná součást, upravil jsem app.config.ts následovně:
Mezitím je app.component.ts komponenta upravena následovně:
Nakonec upravte app.component.html kód následovně:
Vizualizace jsou následující:
Pro informace o načítání efektů animačního stylu se podívejte na následující:
export const Spinkit = {
skChasingDots: 'sk-honiš-tečky',
skCubeGrid: 'sk-cube-grid',
skDoubleBounce: 'sk-double-bounce',
skRotatingPlane: 'sk-rotationg-plane',
skSpinnerPulse: 'sk-spinner-pulse',
skThreeBounce: 'sk-three-bounce',
skWanderingCubes: 'sk-wandering-cubes',
skWave: 'sk-wave'
};
|
Zveřejněno 10.06.2024 15:09:56
|
|
|
|
