web-dev-qa-db-fra.com

Angular 6 contenu multiple

J'essaie de créer un composant personnalisé en utilisant plusieurs contenus dans angular 6, mais cela ne fonctionne pas et je ne sais pas pourquoi.

Ceci est mon code composant:

<div class="header-css-class">
<ng-content select="#header"></ng-content>
</div>
 <div class="body-css-class">
<ng-content select="#body"></ng-content>
</div>

J'essaie d'utiliser ce composant à un autre endroit et de rendre deux codes HTML différents à l'intérieur du corps et de la sélection d'en-tête de ng-content, quelque chose comme ceci:

<div #header>This should be rendered in header selection of ng-content</div>
<div #body>This should be rendered in body selection of ng-content</div>

Mais le composant est rendu vide. Savez-vous ce que je peux faire de mal ou quel est le meilleur moyen de rendre deux sections différentes dans le même composant?

Merci!

angularangular6angular-componentsng-content
27
Lucas Santos
  1. Vous pouvez ajouter des attributs factices header et body par opposition aux références de modèle (#header, #body).
  2. Et transclude en utilisant ng-content avec l'attribut select comme select="[header]".

app.comp.html

<app-child>
    <div header >This should be rendered in header selection of ng-content</div>
    <div body >This should be rendered in body selection of ng-content</div>
</app-child>

child.comp.html

<div class="header-css-class">
    <ng-content select="[header]"></ng-content>
</div>
<div class="body-css-class">
    <ng-content select="[body]"></ng-content>
</div>

DÉMO

59
Amit Chigadani

alternativement, vous pouvez utiliser:

app.comp.html

<app-child>
    <div role="header">This should be rendered in header selection of ng-content</div>
    <div role="body">This should be rendered in body selection of ng-content</div>
</app-child>

child.comp.html

<div class="header-css-class">
    <ng-content select="div[role=header]"></ng-content>
</div>
<div class="body-css-class">
    <ng-content select="div[role=body]"></ng-content>
</div>
0
Angelo Radici