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
: