2016-10-09 12 views
1

isModal:booleanに応じてを囲むContainerComponentを作成したいと考えました。 最後の<ng-content>タグしか認識していないので、私のアプローチは機能していないので、モーダルとノンモダラのためにTemplateUrlを分けたかったのです。私は可能ですか?そうでない場合は、これを行う最もクリーンな方法は何でしょうか?Angular2.0.0 - テンプレートURLを動的に設定

これは私の非作業コードです:私はあなたがngTemplateOutletディレクティブでそれを達成することができると思い

<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> 
+0

それは私の質問に答えていません。私は自分の問題を述べており、多分1つ以上の解決策を持つことができます。彼の問題はあまりにも具体的で、3000行は答えます。私の問題は単純で、おそらくテンプレートレベルで解決することができます –

答えて

2

:ここ

<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> 

plunker

+0

非常にありがとう!これはきれいに、正常に動作します! –

関連する問題