Το πρότυπο ενός στοιχείου δεν θα είναι πάντα σταθερό. Η εφαρμογή σας μπορεί να χρειαστεί να φορτώσει ορισμένα νέα στοιχεία κατά τη διάρκεια του χρόνου εκτέλεσης.
Σενάρια χρήσης:
1. Η φόρτωση σελίδας φορτώνει διαφορετικά στοιχεία σύμφωνα με διαφορετικές παραμέτρους, εμφανίζοντας διαφορετικά εφέ
2. Η σελίδα αποτελείται από πολλά στοιχεία, δεν χρειάζεται να εμφανίζονται όλα στην αρχή και θα εμφανίζονται συγκεκριμένες πληροφορίες αφού ο χρήστης κάνει κλικ, όπως: καρτέλες καρτελών, δυναμικά αναδυόμενα πλαίσια κ.λπ.
Το σενάριο χρήσης αυτού του άρθρου είναι 2, φανταστείτε,Εάν δεν χρησιμοποιείτε δυναμική φόρτωση, όταν ανοίγετε την κύρια διεπαφή, θα φορτωθούν όλα τα κρυφά στοιχεία της σελίδας και όλα τα στοιχεία καλούν τις αντίστοιχες υπηρεσίες διεπαφής τους, συχνά, δεν χρειάζεται να δούμε όλες τις πληροφορίες, κάτι που είναι μεγάλη σπατάλη πόρων και μπορεί επίσης να προκαλέσει αργή φόρτωση της κύριας διεπαφής, επηρεάζοντας την εμπειρία χρήστη。
Υπάρχουν δύο τρόποι δυναμικής φόρτωσης στοιχείων στο ng:
Φόρτωση ήδη δηλωμένων στοιχείων: Χρησιμοποιήστε το ComponentFactoryResolver για να αποδώσετε μια παρουσία ενός στοιχείου σε μια άλλη προβολή στοιχείου.
Δημιουργία και φόρτωση στοιχείων δυναμικά: Χρησιμοποιήστε το ComponentFactory και το Compiler για να δημιουργήσετε και να αποδώσετε στοιχεία
Σύμφωνα με τις ανάγκες μας, τα επιμέρους στοιχεία αναπτύσσονται εκ των προτέρων και πρέπει να εμφανίζονται στο ίδιο στοιχείο. Άρα ο πρώτος τρόπος ανταποκρίνεται στις απαιτήσεις μας.
Για να φορτώσετε δυναμικά στοιχεία χρησιμοποιώντας το ComponentFactoryResolver, πρέπει να κατανοήσετε τις ακόλουθες έννοιες:
- ViewChild: Διακοσμητής ακινήτων, μέσω του οποίου μπορείτε να λάβετε τα αντίστοιχα στοιχεία στην προβολή.
- ViewContainerRef: Ένα κοντέινερ προβολής στο οποίο μπορούν να δημιουργηθούν και να διαγραφούν στοιχεία.
- ComponentFactoryResolver: Ένας αναλυτής στοιχείων που μπορεί να αποδώσει ένα στοιχείο σε μια προβολή ενός άλλου.
Αρχικά, ας δούμε τις αποδόσεις, κάντε κλικ στο κουμπί modal1 για να φορτώσετε δυναμικά το στοιχείο modal1 και κάντε κλικ στο κουμπί modal2 για να φορτώσετε δυναμικά το στοιχείο modal2.
Αρχικά, δημιουργούμε ένα γωνιακό έργο.
Δημιουργήστε 4 στοιχεία, δηλαδή index, modal1, modal2 και modal3, εκ των οποίων τα modal1 και modal2 είναι τα δυναμικά φορτωμένα στοιχεία μας.
στοιχείο δείκτη
HTML:
ΤΣ:
Συνιστώσα Modal1
HTML:
ΤΣ:
Συνιστώσα Modal2
HTML:
ΤΣ:
Συνιστώσα Modal3
HTML:
ΤΣ:
Τυπώσαμε τα ονόματά τους στον κατασκευαστή για 3 modals.
Το modal1 και το modal2 φορτώνονται και τα δύο δυναμικά, μόνο όταν κάνετε κλικ στο κουμπί για φόρτωση, θα ενεργοποιηθεί ο κατασκευαστής εκτέλεσης, το modal3 δεν χρησιμοποιεί δυναμική φόρτωση, μετά τη φόρτωση της γονικής διεπαφής, ο κατασκευαστής διεπαφής modal3 θα εκτελεστεί αμέσως.
Με αυτόν τον τρόπο, μπορείτε να δείτε τα πλεονεκτήματα της δυναμικής φόρτωσης και δεν θα φορτωθεί εάν δεν τη χρησιμοποιήσετε, παρόμοια με την τεμπέλικη φόρτωση σε C#.
Λήψη πηγαίου κώδικα:
Τουρίστες, αν θέλετε να δείτε το κρυφό περιεχόμενο αυτής της ανάρτησης, παρακαλώ Απάντηση
Πόροι:Η σύνδεση με υπερσύνδεσμο είναι ορατή.
|
Δημοσιεύτηκε στις 29/5/2020 4:40:00 μ.μ.
|
|
|
|
Σπιτονοικοκύρης|
Δημοσιεύτηκε στις 24/7/2020 5:52:58 μ.μ.
|
Δημοσιεύτηκε στις 26/10/2022 5:27:19 μ.μ.
|
