Angular2.0.0 - 动态设置模板 url

Question

我想根据 isModal:boolean 创建一个围绕 ng-content 的 ContainerComponent。我的方法不起作用，因为它只识别最后一个 <ng-content> 标记，所以我想将模态和非模态的 TemplateUrl 分开。我可能吗？如果没有，最干净的方法是什么？

这是我的非工作代码：

 <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

我认为您可以使用 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

Angular2.0.0 - 动态设置模板 url

Angular2.0.0 - Dynamically setting template url

angular2-template

angular