Απαιτήσεις: Τα αιτήματα HTTP είναι μια πολύ χρονοβόρα διαδικασία, όταν ένας χρήστης υποβάλλει μια φόρμα στο frontend, το backend χρειάζεται διάφορους ελέγχους και στη συνέχεια μια μόνιμη βάση δεδομένων και τα δεδομένα μεταδίδονται μέσω του δικτύου. Όταν ένας χρήστης υποβάλλει μια φόρμα,Δεν θέλετε ο χρήστης να μπορεί να κάνει κλικ σε οποιαδήποτε ενέργεια στη διεπαφή (ή δεν θέλετε να κάνετε επανειλημμένα κλικ στην Υποβολή)。 Χρειαζόμαστε ένα κινούμενο σχέδιο για παγκόσμια φόρτωση.
ng-http-loader Αυτό το πακέτο παρέχει έναν αποκλεισμό HTTP και ορισμένα στοιχεία περιστροφής (όλα από το SpinKit προς το παρόν). Ο αποκλεισμός HTTP ακούει για όλα τα αιτήματα HTTP και εμφανίζει μια ένδειξη περιστροφέα/φορτωτή κατά τη διάρκεια εκκρεμών αιτημάτων HTTP.
Διεύθυνση NPM:Η σύνδεση με υπερσύνδεσμο είναι ορατή.
Διεύθυνση GitHub:Η σύνδεση με υπερσύνδεσμο είναι ορατή.
Εγκαταστήστε την κατάλληλη έκδοση ng-http-loader σύμφωνα με την έκδοση Angular, λαμβάνοντας ως παράδειγμα την έκδοση Angular 17, η εντολή εγκατάστασης είναι η εξής:
Δεδομένου ότι είμαι αυτόνομο στοιχείο, τροποποίησα app.config.ts ως εξής:
Εν τω μεταξύ, το στοιχείο app.component.ts τροποποιείται ως εξής:
Τέλος, τροποποιήστε τον κωδικό app.component.html ως εξής:
Οι αποδόσεις είναι οι εξής:
Για πληροφορίες σχετικά με τη φόρτωση εφέ στυλ κίνησης, ανατρέξτε στα ακόλουθα:
εξαγωγή const Spinkit = {
skChasingDots: 'sk-chasing-dots',
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»
};
|
Δημοσιεύτηκε στις 10/6/2024 3:09:56 μ.μ.
|
|
|
|
