Angular2.0.0 - Vorlage dynamisch setzen

Question

Ich wollte eine ContainerComponent erstellen, die ng-content je nach isModal:boolean umgibt. Mein Ansatz funktioniert nicht, weil er nur das letzte <ng-content> Tag erkennt, also wollte ich das TemplateUrl für modal und nicht-modal trennen. I s ist es möglich? Wenn nicht, was wäre der sauberste Weg, dies zu tun?

Das ist mein nicht funktionierenden Code:

<div *ngIf="isModal" class="modal in"> 
    <div class="modal-dialog" role="document"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click) = "close()"> 
      <span aria-hidden="true">&times;</span> 
     </button> 
       <h4 class="modal-title">{{title}}</h4> 
      </div> 
      <div class="modal-body"> 
       <ng-content></ng-content> 
      </div> 
     </div> 
     <!-- /.modal-content --> 
    </div> 
    <!-- /.modal-dialog --> 
</div> 
<!-- /.modal --> 
<div *ngIf="!isModal"> 
    <ng-content></ng-content> 
</div> 

Answer 1

Ich glaube, Sie es mit der ngTemplateOutlet Richtlinie erreichen können:

<div *ngIf="isModal" class="modal in"> 
    <div class="modal-dialog" role="document"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" 
         aria-label="Close" (click) = "close()"> 
        <span aria-hidden="true">&times;</span> 
       </button> 
       <h4 class="modal-title">{{title}}</h4> 
      </div> 
      <div class="modal-body"> 
       <template [ngTemplateOutlet]="tmpl"></template> 
      </div> 
     </div> 
     <!-- /.modal-content --> 
    </div> 
    <!-- /.modal-dialog --> 
</div> 
<!-- /.modal --> 
<div *ngIf="!isModal"> 
    <template [ngTemplateOutlet]="tmpl"></template> 
</div> 

<template #tmpl> 
    <ng-content></ng-content> 
</template> 

Hier plunker