web-dev-qa-db-ja.com

Angular 6個の複数のng-content

angular 6の複数のngコンテンツを使用してカスタムコンポーネントを構築しようとしていますが、これは機能せず、理由はわかりません。

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

<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コードと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つの異なるセクションをレンダリングする最良の方法は何ですか？

ありがとう！

angularangular6angular-componentsng-content
27
Lucas Santos
  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

59
Amit Chigadani

または、次を使用できます。

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