Composant dynamique

Les modèles de composants ne sont pas toujours fixes. Une application peut avoir besoin de charger de nouveaux composants au moment de l'exécution. Ici je vous montre comment utiliser ComponentFactoryResolver pour ajouter des composants de manière dynamique.

Chargement dynamique des composants

L'exemple suivant montre comment créer une bannière publicitaire dynamique. Vous avez besoin d'un moyen de charger un nouveau composant sans référence fixe au composant dans le modèle de la bannière publicitaire. Angular est livré avec sa propre API pour le chargement dynamique de composants.

La directive d'ancrage

Avant de pouvoir ajouter des composants, vous devez définir un point d'ancrage pour indiquer à Angular où insérer des composants. La bannière publicitaire utilise une directive d'assistance appelée AdDirective pour marquer les points d'insertion valides dans le modèle.

AdDirective injecte ViewContainerRef pour accéder au conteneur de vue de l'élément qui hébergera le composant ajouté dynamiquement. Dans le décorateur @Directive, notez le nom du sélecteur [ad-host]; c'est ce que vous utilisez pour appliquer la directive à l'élément.

Chargement des composants

La plupart des implémentations de bannières publicitaires sont au format ad-banner.component.ts. Pour que les choses restent simples dans cet exemple, le code HTML appartient à la propriété du décorateur @Component en tant que chaîne de modèle template.

L'élément ‹ng-template› est l'endroit où vous appliquez la directive que vous venez de faire. Pour appliquer le AdDirective, rappeler le sélecteur de ad.directive.ts, ad-host. Appliquez cela à ‹ng-template› sans les crochets. Angular sait maintenant où charger dynamiquement des composants.

L'élément ‹ng-template› est un bon choix pour les composants dynamiques car il ne génère pas de sortie supplémentaire.

Résolution de composants

Regardez de plus près les méthodes ad-banner.component.ts.

AdBannerComponent prend un tableau d'objets AdItem en entrée, qui provient finalement de AdService. les objets AdItem spécifient le type de composant à charger et toutes les données à lier au composant. AdService renvoie les annonces constituant la campagne publicitaire.

En passant un tableau de composants, vous créez une liste dynamique d'annonces sans éléments statiques dans le modèle AdBannerComponent.

Avec sa méthode getAds(), AdBannerComponent parcourt le tableau de AdItems et charge un nouveau composant toutes les 3 secondes en appelant loadComponent().

src/app/ad-banner.component.ts (excerpt)

La méthode loadComponent() fait beaucoup de travail ici. Prenez-le étape par étape. Tout d'abord, il choisit une annonce. Comment loadComponent() choisit une annonce ? La méthode loadComponent() choisit une annonce en utilisant des mathématiques.

Tout d'abord, elle définit le currentAdIndex en prenant ce qu'il est actuellement plus un, en le divisant par la longueur du tableau AdItem et en utilisant le reste comme nouvelle valeur currentAdIndex. Ensuite, elle utilise cette valeur pour sélectionner un adItem élément du tableau.

Après avoir sélectionné une annonce loadComponent() utilise ComponentFactoryResolver pour résoudre un ComponentFactory pour chaque composant spécifique. Ensuite le ComponentFactory crée une instance de chaque composant.

Ensuite, vous ciblez ce viewContainerRef qui existe sur cette instance spécifique du composant. Comment savez-vous que c'est cette instance spécifique ? Parce qu'il fait référence à adHost et adHost est la directive que vous configurez plus tôt pour dire a Angular où insérer des composants dynamiques.

AdDirectives injecte ViewContainerRef dans son constructeur. Voici comment la directive accède à l'élément que vous souhaitez utiliser pour héberger le composant dynamique.

Pour ajouter le composant au modèle, appelez createComponent() sur ViewContainerRef.

La méthode createComponent() renvoie une référence au composant chargé. Utilisez cette référence pour interagir avec le composant en affectant ses propriétés ou en appelant ses méthodes.

Références de sélecteur

Généralement, le compilateur Angular génère un ComponentFactory pour tout composant référencé dans un modèle. Cependant, il n'y a pas de références de sélecteur dans les modèles pour les composants chargés dynamiquement, car ils se chargent au moment de l'exécution.

Pour vous assurer que le compilateur génère toujours une fabrique, ajoutez des composants chargés dynamiquement au tableau entryComponents du NgModule :

L'interface AdComponent

Dans la bannière publicitaire, tous les composants implémentent une interface AdComponent commune permettant de normaliser l'API permettant de transmettre des données aux composants.

Voici deux exemples de composants et l'interface AdComponent de référence :

hero-job-ad.component.ts

hero-profile.component.ts

ad.component.ts

Bannière publicitaire finale

La bannière publicitaire finale ressemble à ceci :