Angular2 verschachtelte Komponenten ohne Abhängigkeitsinjektion möglich?

Question

Der Titel könnte ein wenig irreführend sein, aber es ist etwas genau.

Ich habe drei Komponenten. Es gibt eine Hauptkomponente (View) und zwei untergeordnete Komponenten (Accordion und Panel). Die zwei untergeordneten Komponenten sind Peers voneinander. Ich möchte jedoch Panel innerhalb von Accordion anzeigen, ohne Panel innerhalb der directives Eigenschaft injizieren zu müssen. Der Grund, warum ich dies vermeiden möchte, ist, dass nicht alle Accordion in der Anwendung eine Panel haben. Ich dachte, dass ich diese Zeit erreicht habe, als Angular2 noch in der Beta war, aber vergaß wie. Ich benutze RC.4.

Theoretisch wäre dies eine ideale Implementierung sein:

view.component.html

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

view.component.ts

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

Gerade jetzt Accordion ist Rendering, aber Panel ist nicht. Ich kann Panel separat rendern. In der Browserkonsole werden keine Fehler ausgegeben.

Die Komponenten sind im Moment sehr, sehr einfach, es gibt also nicht viel Code zu zeigen.

Answer 1

Dank @toskv für die Bereitstellung von Referenzmaterial.

Ich musste am Ende <ng-content></ng-content> als Platzhalter für die verschachtelte Komponente verwenden. In meinem Fall möchte ich alle verschachtelten Accordion Inhalt in den Accordion Körper gehen. Ich war in der Lage, mehrere Panels mit einem einzigen ng-content Tag verschachtelt.

Dies funktioniert:

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>