Projection à plusieurs emplacements avec select
Projetez du contenu dans des emplacements nommés
Projection à plusieurs emplacements avec select est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 2 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.
Plusieurs emplacements
De nombreux composants ont besoin de plusieurs zones : un en-tête, un corps et un pied de page. Angular prend cela en charge avec la projection à plusieurs emplacements, à l’aide de l’attribut select sur <ng-content>.
L’attribut select
select accepte un sélecteur CSS. Chaque élément <ng-content select="..."> ne projette que les nœuds correspondant à ce sélecteur.
<ng-content select="[card-header]"></ng-content>
<ng-content select="[card-body]"></ng-content>Sélectionner par attribut
Les sélecteurs d’attributs sont le modèle le plus courant, car ils sont faciles à lire dans le balisage du composant utilisateur.
@Component({
selector: 'app-card',
template:
'<header><ng-content select="[header]"></ng-content></header>' +
'<main><ng-content select="[body]"></ng-content></main>'
})
export class CardComponent {}Utiliser des emplacements nommés
Le composant utilisateur associe à chaque partie du contenu l’attribut correspondant.
<app-card>
<h2 header>Title</h2>
<p body>Some body text here.</p>
</app-card>Sélectionner par élément ou par classe
Vous pouvez également sélectionner par nom d’élément ou par classe CSS.
<ng-content select="card-title"></ng-content>
<ng-content select=".highlight"></ng-content>L’emplacement général
Un élément <ng-content> sans select capture tout ce qui ne correspondait pas à un emplacement nommé. Placez-le en dernier pour servir de solution de secours.
<ng-content select="[header]"></ng-content>
<ng-content></ng-content>L’ordre est important
Angular évalue les emplacements dans l’ordre du modèle. Chaque nœud projeté est affecté au premier emplacement correspondant. Placez l’emplacement général après les sélecteurs spécifiques afin qu’il n’absorbe pas tout le contenu.
Combiner des sélecteurs
Les sélecteurs CSS peuvent être combinés ; par exemple, select="button[primary]" cible un élément bouton possédant un attribut primary.
<ng-content select="button[primary]"></ng-content>Un composant de mise en page
Voici une carte avec des emplacements pour l’en-tête, le corps et le pied de page, ainsi qu’un emplacement général.
@Component({
selector: 'app-card',
template:
'<header><ng-content select="[header]"></ng-content></header>' +
'<section><ng-content></ng-content></section>' +
'<footer><ng-content select="[footer]"></ng-content></footer>'
})
export class CardComponent {}Chaque nœud n’est projeté qu’une fois
Un nœud projeté donné ne correspond qu’à un seul emplacement et est affiché exactement une fois. La projection ne permet pas de cloner le même nœud dans deux emplacements.
Mise en forme par emplacement
Chaque emplacement se trouvant dans une zone DOM distincte, vous pouvez placer les emplacements dans des conteneurs mis en forme (en-tête et pied de page) afin de donner à chaque zone son propre aspect.
Vérification rapide
Testez vos connaissances sur la projection à plusieurs emplacements.
Récapitulatif
Vous avez appris à créer des composants à plusieurs emplacements avec <ng-content select="...">. Les sélecteurs peuvent cibler des attributs, des éléments ou des classes ; un emplacement sans sélection sert d’emplacement général ; et l’ordre détermine quel emplacement l’emporte.
Questions Fréquemment Posées
La leçon « Projection à plusieurs emplacements avec select » est-elle gratuite ?
Oui — le texte complet de « Projection à plusieurs emplacements avec select » 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 à plusieurs emplacements avec select » ?
Projetez du contenu dans des emplacements nommés 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 2 sur 4.
Combien de temps prend la leçon « Projection à plusieurs emplacements avec select » ?
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