angular2 rc.4 ng-Inhalt dupliziert funktioniert nicht

Question

Ich versuche, eine "editComponent" zu implementieren, die in einer pageComponent oder in einer dialogComponent angezeigt werden kann, aber ng-content Tag in der gleichen Komponente nicht arbeiten (nur funktioniert las ng-Inhalt Tag):

<div *ngIf="dialog"> 
    <ng-content></ng-content> 
</div> 

<!-- for pages not in dialog popups put all div structure --> 
<div *ngIf="!dialog" class="container content"> 
    <div class="page-header"> 
    <h2>{{title}}</h2> 
    </div> 
    <div class="row"> 
    <div class="col-md-12"> 
     <ng-content></ng-content> 
    </div> 
    </div> 
</div> 

Wie es erreicht werden kann?

Answer 1

Alle Kinder werden in die <ng-content> mit dem passenden Selektor übertragen.
Alle nicht übereinstimmenden untergeordneten Elemente werden in das erste <ng-content> übertragen, das kein select="..."-Attribut aufweist.

Wenn die Kinder als <template> übergeben werden, gibt es mehr Möglichkeiten.

Es gibt Pläne, flexiblere (dynamische) Einführungsszenarien zu unterstützen, aber derzeit ist dies eher statisch.

Answer 2

habe ich endlich diese Art und Weise umgesetzt:

<!-- for pages in dialog popups remove classes and header --> 
<div [ngClass]="{'container content':!dialog}"> 
    <div class="page-header" *ngIf="!dialog"> 
    <h2>{{title}}</h2> 
    </div> 
    <div [ngClass]="{'row':!dialog}"> 
    <div [ngClass]="{'col-md-12':!dialog}"> 
     <ng-content></ng-content> 
    </div> 
    </div> 
</div> 

Nur ein ng-Content-Tag alle div-Klassen und Header zu entfernen.