TemplateRef et ViewContainerRef
Effectuez le rendu dynamique de modèles
TemplateRef et ViewContainerRef est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Angular Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Angular Academy comprend 4 leçons au total.
Affichage impératif
Vous devez parfois afficher du contenu par programmation plutôt que de manière déclarative. Angular expose TemplateRef et ViewContainerRef pour ce contrôle de bas niveau.
TemplateRef
Un TemplateRef est une référence vers un élément <ng-template>. Il représente du balisage que vous pourrez instancier ultérieurement.
tpl = viewChild.required<TemplateRef<unknown>>('tpl');ViewContainerRef
Un ViewContainerRef est un emplacement du DOM auquel vous pouvez attacher des vues. Injectez-le pour contrôler ce qui y est affiché.
private vcr = inject(ViewContainerRef);createEmbeddedView
Combinez les deux : createEmbeddedView instancie un TemplateRef dans un ViewContainerRef.
this.vcr.createEmbeddedView(this.tpl());Transmettre un contexte
Vous pouvez transmettre un objet de contexte comme deuxième argument ; celui-ci est accessible via des variables let-.
this.vcr.createEmbeddedView(this.tpl(), {
$implicit: 'Hello',
count: 3
});Supprimer des vues
ViewContainerRef.clear() supprime toutes les vues qu’il a créées. C’est ainsi que vous activez ou désactivez du contenu dynamique.
this.vcr.clear();Une directive structurelle personnalisée
Ce modèle est à la base des directives structurelles personnalisées. La directive injecte les deux références et effectue un affichage conditionnel.
@Directive({ selector: '[appUnless]' })
export class UnlessDirective {
private tpl = inject(TemplateRef<unknown>);
private vcr = inject(ViewContainerRef);
}Réagir à une entrée
Un accesseur de l’entrée de la directive pilote la création et la suppression afin que la vue apparaisse ou disparaisse.
@Input() set appUnless(condition: boolean) {
if (!condition) {
this.vcr.createEmbeddedView(this.tpl);
} else {
this.vcr.clear();
}
}Insérer à un indice
createEmbeddedView accepte un indice pour contrôler l’ordre d’insertion parmi les vues sœurs.
this.vcr.createEmbeddedView(this.tpl(), {}, 0);createComponent
ViewContainerRef peut également instancier des composants de manière dynamique avec createComponent, qui constitue le remplacement moderne de ComponentFactoryResolver.
const ref = this.vcr.createComponent(WidgetComponent);
ref.setInput('title', 'Hi');Nettoyage
Les vues créées impérativement doivent être nettoyées. La destruction du composant hôte vide automatiquement son ViewContainerRef, mais appelez clear() lorsque vous effectuez un basculement manuellement.
Vérification rapide
Testez votre compréhension de l’affichage impératif.
Récapitulatif
Vous avez appris que TemplateRef est une référence vers le balisage d’un modèle, que ViewContainerRef est un point d’insertion dans le DOM et que createEmbeddedView affiche l’un dans l’autre. Ensemble, ils permettent de créer des directives structurelles personnalisées et des composants dynamiques.
Questions Fréquemment Posées
La leçon « TemplateRef et ViewContainerRef » est-elle gratuite ?
Oui — le texte complet de « TemplateRef et ViewContainerRef » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Angular Academy, passe à CoddyKit PRO. Le cours Angular Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « TemplateRef et ViewContainerRef » ?
Effectuez le rendu dynamique de modèles Tu pratiques Angular Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Angular Academy ?
Aucune expérience préalable n'est requise. Angular Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.
Combien de temps prend la leçon « TemplateRef et ViewContainerRef » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Angular Academy ?
Oui. Chaque leçon Angular Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Projection de contenu à emplacement unique
- Projection à plusieurs emplacements avec select
- ng-template et ng-container
- TemplateRef et ViewContainerRef