Angular2.0.0 - 动态设置模板网址

我想创建一个ContainerComponent围绕ng-content取决于isModal:boolean。我的方法不起作用，因为它只识别最后一个<ng-content>标记，所以我想将TemplateUrl分开为模态和非模态。我可以用吗？如果没有，那么做到这一点最干净的方法是什么？Angular2.0.0 - 动态设置模板网址

这是我的非工作代码：

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

来源

2016-10-09 Luka Šilje

它没有回答我的问题。我已经说明了我的问题，也许它可以有多个解决方案。他的问题太具体了，3000线回答。我的问题很简单，可以在模板级别 –

我想你可以用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"> 
       <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

来源

2016-10-09 13:39:53 yurzui

解决，非常感谢！这工作很好，优雅！ –

Angular2.0.0 - 动态设置模板网址

回答

相关问题