Question

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

这是我的非工作代码：

 <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

1 个答案: