依存性注入のない角度2のネストされたコンポーネントは可能ですか？

Question

タイトルは少し誤解を招くかもしれませんが、多少正確です。

私は3つのコンポーネントを持っています。 1つの親コンポーネント（View）と2つの子コンポーネント（AccordionとPanel）があります。 2つの子コンポーネントは互いにピアです。しかし、PanelをAccordionの内部に表示させたい場合は、のdirectivesプロパティの内側にPanelを挿入する必要はありません。私がこれを避けたいのは、アプリケーション内のすべてAccordionにPanelがあるわけではないからです。私はAngular2がまだベータ版であったのに、これをもう一度達成したと思ったが、どうやって忘れてしまった。私はRC.4を使用しています。

view.component.html

<accordion title="View"> 
    <panel></panel> 
</accordion> 

view.component.ts

... 
@Component({ 
    ... 
    directives: [ 
    Accordion, 
    Panel 
    ] 
}) 
... 

今Accordionは次のとおりです。

理論的には、これは理想的な実装になりますレンダリングしていますが、Panelではありません。私はPanelを別々にレンダリングすることができます。ブラウザのコンソールにエラーがスローされていません。

コンポーネントは現在非常に非常に簡単なので、表示するコードはあまりありません。

Answer 1

私に参考資料を提供してくれた@toskvに感謝します。

ネストされたコンポーネントがどこに行くのかのプレースホルダとして<ng-content></ng-content>を使用する必要がありました。私の場合は、Accordion本文にネストされたAccordionのコンテンツを入れたいと思います。 1つのng-contentタグで複数の​​をネストすることができました。

これは動作します：

accordion.component.html

<div class="panel"> 
    <div class="panel-heading"> 
    <h3 (click)="toggle()">{{title}}</h3> 
    </div> 
    <div class="panel-body" [hidden]="collapsed"> 
    <ng-content></ng-content> 
    </div> 
</div> 

panel.component.html

<div class="panel"> 
    <div class="panel-heading"> 
    <div class="panel-title"> 
     Title 
    </div> 
    </div> 
    <div class="panel-body"> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
    </div> 
</div> 

view.component.html

<accordion title="Instances"> 
    <panel></panel> 
    <panel></panel> 
</accordion>