Comment utiliser la projection de contenu (alias transclusion) en Angulaire

Question

Je suis nouveau à angulaire 4.

J'ai un doute sur les 4 composants incorporés.

exemple:

<hero-list> 
    <hero></hero> 
    <hero></hero> 
</hero-list> 

Je voulais savoir comment créer une vue basée sur cette structure qui est un composant Embedding dans un autre composant.

Answer 1

Vous devez utiliser <ng-content></ng-content> dans votre composant hero-list. Donc vous pouvez réaliser votre souhait ci-dessus.

héros list.component.html

<div class="hero-list"> 
    <h1>Hero list</h1> 
    <ng-content></ng-content> 
</div> 

Et maintenant, vous pouvez envelopper vos hero-item -Composants et ils seront imprimés à l'intérieur de hero-list composant.

app.component.html

<hero-list> 
    <hero-item></hero-item> 
    <hero-item></hero-item> 
</hero-list> 

travaille par exemple ici: https://stackblitz.com/edit/angular-nvpmtc

Et here est un bon article sur la projection du contenu dans angualr.

Answer 2

Si vous voulez dire que vous voulez une mise en page principale avec des sous vues, vous pouvez regarder le routeur angulaire https://angular.io/tutorial/toh-pt5

Ce qui pourrait ressembler à ceci

<app-component> 
    <h1>Static title</h1> 
    <router-outlet></router-outlet> 
</app-component> 

Le routeur de sortie passe entre différents composants définis dans votre fichier de routage lors de la navigation vers des liens différents, mais le html autour ne changera pas