[解決済み] 複数のng-content

質問

カスタムコンポーネントを作成しようとしています。 ng-content が、うまくいかず、その理由がわかりません。

これは私のコンポーネントコードです。

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

このコンポーネントを別の場所で使用し、2つの異なるHTMLコードを内部でレンダリングしようとしています。 body とヘッダー select の ng-content のようなものです。

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

しかし、コンポーネントは空白のままレンダリングされます。

また、同じコンポーネントで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