Vaatimukset: HTTP-pyynnöt ovat hyvin aikaa vievä prosessi, kun käyttäjä lähettää lomakkeen frontendiin, taustajärjestelmä tarvitsee erilaisia tarkistuksia ja sen jälkeen pysyvän tietokannan, ja data siirretään verkon kautta. Kun käyttäjä lähettää lomakkeen, meEt halua, että käyttäjä voi klikata mitä tahansa toimintoa käyttöliittymässä (tai et halua painaa toistuvasti Lähetä).。 Tarvitsemme animaation globaalia latausta varten.
ng-http-loader Tämä paketti tarjoaa HTTP-estolaitteen ja joitakin spinner-komponentteja (kaikki toistaiseksi SpinKitistä). HTTP-estäjä kuuntelee kaikkia HTTP-pyyntöjä ja näyttää rotator/loader-indikaattorin odottavien HTTP-pyyntöjen aikana.
NPM-osoite:Hyperlinkin kirjautuminen on näkyvissä.
GitHub-osoite:Hyperlinkin kirjautuminen on näkyvissä.
Asenna sopiva ng-http-loader-versio Angular-version mukaan, ottaen esimerkiksi Angular 17 -version, asennuskomento on seuraava:
Koska olen itsenäinen komponentti, muokkasin app.config.ts seuraavasti:
Samaan aikaan app.component.ts komponenttia muokataan seuraavasti:
Lopuksi muokkaa app.component.html-koodia seuraavasti:
Renderöinnit ovat seuraavat:
Lisätietoja animaatiotyylisten efektien lataamisesta löydät seuraavasta:
export const Spinkit = {
skChasingDots: 'sk-chasing-dots',
skCubeGrid: 'sk-kuutio-ruudukko',
skDoubleBounce: 'sk-double-bounce',
skRotatingPlane: 'sk-rotationg-taso',
skSpinnerPulse: 'sk-spinner-pulse',
skThreeBounce: 'sk-kolme-pomppu',
skWanderingCubes: 'sk-wandering-kuutiot',
skWave: 'sk-wave'
};
|
Julkaistu 10.6.2024 15.09.56
|
|
|
|
