Угловые2 вложенные компоненты без возможности инъекции возможно?

Question

Название может быть немного обманчивым, но оно несколько точным.

У меня есть три компонента. Существует один родительский компонент (View) и два дочерних компонента (Accordion и Panel). Два дочерних компонента являются одноранговыми. Тем не менее, я хочу, чтобы Panel отображался внутри Accordion без ввода Panel внутри Accordiondirectives. Причина, по которой я хочу избежать этого, заключается в том, что не каждый 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. Мне удалось вложить несколько Panels с одним тегом 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>