Projection de contenu à emplacement unique
Projetez du contenu avec ng-content
Projection de contenu à emplacement unique est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 1 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.
Qu’est-ce que la projection de contenu ?
La projection de contenu permet à un composant de recevoir du balisage de son parent et de l’afficher dans son propre modèle. C’est l’équivalent Angular des « slots » des composants web.
Le parent écrit le contenu entre les balises du composant, et le composant décide où ce contenu apparaît.
Pourquoi en avez-vous besoin ?
Les conteneurs réutilisables comme les cartes, les boîtes de dialogue et les panneaux ne connaissent pas leur contenu à l’avance. La projection de contenu en fait des conteneurs flexibles.
- Créez une carte une seule fois et remplissez-la avec n’importe quel contenu
- Conservez la logique de mise en page dans le composant
- Conservez le contenu dans le composant utilisateur
L’élément ng-content
L’élément <ng-content> indique l’emplacement où le contenu projeté est placé. Une configuration à emplacement unique utilise exactement un élément <ng-content>, sans attribut select.
@Component({
selector: 'app-card',
template: '<div class="card"><ng-content></ng-content></div>'
})
export class CardComponent {}Utiliser le composant
Tout ce que le parent place entre les balises du composant est projeté dans l’emplacement.
<app-card>
<h2>Hello</h2>
<p>This text is projected into the card.</p>
</app-card>Emplacement unique = une sortie
Avec un emplacement unique sans nom, tous les nœuds projetés vont dans l’unique élément <ng-content>. Il n’y a aucun filtrage ; l’ordre est conservé exactement comme le parent l’a écrit.
Contenu par défaut
Vous pouvez placer un balisage de secours à l’intérieur de <ng-content>. Les versions modernes d’Angular n’affichent ce contenu par défaut que lorsque le composant utilisateur ne projette rien dans cet emplacement.
<div class="card">
<ng-content>No content provided.</ng-content>
</div>Mettre en forme le contenu projeté
Le contenu projeté appartient à la vue du parent ; il est donc mis en forme par les styles du parent, et non ceux de la carte. Pour atteindre les nœuds projetés depuis la carte, utilisez ::ng-deep avec parcimonie ou appuyez-vous sur des styles globaux.
Contenu et vue
Angular distingue les enfants de contenu (projetés) des enfants de vue (déclarés dans le modèle). Cela est important pour les requêtes telles que contentChild et viewChild.
icon = contentChild(IconComponent);Cycle de vie : ngAfterContentInit
Le contenu projeté est disponible après l’exécution de ngAfterContentInit(). Utilisez-le (ou ngAfterContentChecked) pour lire les enfants de contenu en toute sécurité.
ngAfterContentInit() {
console.log('Projected content ready');
}Un véritable exemple de panneau
Voici un panneau réutilisable complet. Le composant utilisateur contrôle entièrement le contenu intérieur ; le panneau contrôle la structure externe.
@Component({
selector: 'app-panel',
template: '<section class="panel"><ng-content></ng-content></section>',
styles: ['.panel { border: 1px solid #ccc; padding: 16px; }']
})
export class PanelComponent {}Erreur courante
Placer deux fois le même élément <ng-content> sans nom ne duplique pas le contenu. Angular effectue uniquement la projection dans le dernier emplacement correspondant. Utilisez une projection à plusieurs emplacements si vous avez besoin de plusieurs zones.
Vérification rapide
Testez votre compréhension de la projection à emplacement unique.
Récapitulatif
Vous avez appris que la projection de contenu utilise <ng-content> pour afficher le balisage fourni par le parent dans un composant. La projection à emplacement unique utilise une seule sortie sans nom, le contenu projeté appartient à la vue du parent et devient disponible dans ngAfterContentInit.
Questions Fréquemment Posées
La leçon « Projection de contenu à emplacement unique » est-elle gratuite ?
Oui — le texte complet de « Projection de contenu à emplacement unique » 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 « Projection de contenu à emplacement unique » ?
Projetez du contenu avec ng-content 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 1 sur 4.
Combien de temps prend la leçon « Projection de contenu à emplacement unique » ?
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