Угловой 6-кратный нг-контент

Question

Я пытаюсь создать пользовательский компонент, используя несколько нг контента в angular 6, но это не работает, и я понятия не имею, почему.

Это мой код компонента:

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

Я пытаюсь использовать этот компонент в другом месте и отображать два разных HTML-кода внутри тела и заголовок выбора ng-содержимого, примерно так:

<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>

Но компонент отображается пустым.Ребята, вы знаете, что я могу делать неправильно или как лучше всего отобразить два разных раздела в одном компоненте?

Спасибо!

Answer 1

Вы также можете использовать:

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>

Answer 2

1. Вы можете добавить фиктивные атрибуты header и body в отличие от ссылок на шаблоны (#header, #body).
2. и включить использование ng-content с атрибутом select, например 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>

DEMO