Wymagania: Żądania HTTP to bardzo czasochłonny proces, gdy użytkownik wysyła formularz na frontendzie, backend wymaga różnych kontroli, a następnie trwałej bazy danych, a dane są przesyłane przez sieć. Gdy użytkownik przesyła formularz, myNie chcesz, aby użytkownik mógł kliknąć dowolną akcję w interfejsie (ani nie chcesz wielokrotnie klikać Wyślij).。 Potrzebujemy animacji do globalnego ładowania.
ng-http-loader Ten pakiet oferuje bloker HTTP oraz niektóre komponenty spinnera (na razie wszystkie ze SpinKit). Bloker HTTP nasłuchuje wszystkich żądań HTTP i wyświetla wskaźnik rotatora/loadera podczas oczekujących żądań HTTP.
Adres NPM:Logowanie do linku jest widoczne.
Adres GitHub:Logowanie do linku jest widoczne.
Zainstaluj odpowiednią wersję ng-http-loadera zgodnie z wersją Angular, biorąc na przykład wersję Angular 17, polecenie instalacji jest następujące:
Ponieważ jestem samodzielnym komponentem, zmodyfikowałem app.config.ts następująco:
Tymczasem komponent app.component.ts jest modyfikowany w następujący sposób:
Na koniec zmodyfikuj kod app.component.html w następujący sposób:
Przedstawienia przedstawiają się następująco:
Aby uzyskać informacje o ładowaniu efektów stylu animacji, zapoznaj się z następującymi elementami:
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-trzy-bounce',
skWanderingCubes: 'sk-wędrujące-kostki',
skWave: 'sk-wave'
};
|
Opublikowano 10.06.2024 15:09:56
|
|
|
|
