Le modèle d’un composant ne sera pas toujours fixe. Votre application pourrait avoir besoin de charger de nouveaux composants pendant l’exécution.
Scénarios d’utilisation :
1. Le chargement de la page charge différents composants selon différents paramètres, montrant différents effets
2. La page est composée de plusieurs éléments, tous n’ont pas besoin d’être affichés au début, et des informations spécifiques seront affichées après les clics de l’utilisateur, telles que : onglets d’onglets, boîtes modaux dynamiques à pop-up, etc.
Le scénario d’utilisation de cet article est 2, imaginez juste,Si vous n’utilisez pas le chargement dynamique, lorsque vous ouvrez l’interface principale, tous les composants cachés de la page seront chargés, et tous les composants appelleront leurs services d’interface correspondants, souvent, nous n’avons pas besoin de voir toutes les informations, ce qui est un grand gaspillage de ressources, et peut aussi entraîner un chargement lent de l’interface principale, affectant l’expérience utilisateur。
Il existe deux façons de charger dynamiquement des composants dans ng :
Charger les composants déjà déclarés : Utilisez ComponentFactoryResolver pour afficher une instance d’un composant vers une autre vue composante ;
Créer et charger des composants dynamiquement : Utilisez ComponentFactory et Compiler pour créer et afficher des composants
Selon nos besoins, les composants individuels sont développés à l’avance et doivent être affichés sur le même composant. Ainsi, la première méthode répond à nos exigences.
Pour charger dynamiquement des composants en utilisant ComponentFactoryResolver, vous devez comprendre les concepts suivants :
- ViewChild : décorateur de propriété, grâce auquel vous pouvez obtenir les éléments correspondants sur la vue ;
- ViewContainerRef : Un conteneur de vue sur lequel les composants peuvent être créés et supprimés ;
- ComponentFactorySolver : Un analyseur de composants capable de rendre un composant sur une vue d’un autre.
D’abord, regardons les rendus : cliquez sur le bouton modal1 pour charger dynamiquement le composant modal1, puis cliquez sur le bouton modal2 pour charger dynamiquement le composant modal2.
Tout d’abord, nous créons un projet angulaire.
Créez 4 composantes, à savoir index, modal1, modal2 et modal3, dont modal1 et modal2 sont nos composantes dynamiquement chargées.
Composante index
HTML :
TS :
Composant modal1
HTML :
TS :
Composant modal2
HTML :
TS :
Composant modal3
HTML :
TS :
Nous avons imprimé leurs noms sur le constructeur pour 3 modaux.
Modal1 et Modal2 sont tous deux chargés dynamiquement, ce n’est que lorsque le bouton est appuyé pour charger que le constructeur d’exécution sera déclenché, Modal3 n’utilise pas de chargement dynamique, et après le chargement de l’interface parente, le constructeur d’interface Modal3 sera exécuté immédiatement.
De cette façon, vous pouvez voir les avantages du chargement dynamique, et il ne se chargera pas si vous ne l’utilisez pas, un peu comme le chargement paresseux en C#.
Téléchargement du code source :
Touristes, si vous voulez voir le contenu caché de ce post, s’il vous plaît Répondre
Ressources:La connexion hyperlientérée est visible.
|
Publié sur 29/05/2020 16:40:00
|
|
|
|
Propriétaire|
Publié sur 24/07/2020 17:52:58
|
Publié sur 26/10/2022 17:27:19
|
