我可以动态呈现 NgModal 的 HTML答案

【问题标题】：Can I have NgModal's HTML rendered dynamically我可以动态呈现 NgModal 的 HTML
【发布时间】：2017-05-31 13:01:06
【问题描述】：

我仍在探索 Angular2。我尝试在线检查，但找不到任何表明可能的信息。

我的问题是-

我可以在一页上只使用一个 ngModal，并且不仅提供不同的内容，还提供不同的 HTML 格式。所以让我们假设我的页面上有两个按钮，当我点击一个时，下面是模态的外观 -

<ng-template #content let-c="close" let-d="dismiss">
  <div class="modal-header">
    <h4 class="modal-title">{{ModalTitle}}</h4>
    <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <p>One fine body&hellip;</p>
  </div>
  <div class="modal-footer" *ngIf="footerEnabled">
    <button type="button" class="btn btn-secondary" (click)="c('Close click')">Close</button>
  </div>
</ng-template>

当我点击另一个时，

<ng-template #content let-c="close" let-d="dismiss">
  <div class="modal-header">
    <h4 class="modal-title">{{ModalTitle}}</h4>
    <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <span>One fine body&hellip;</span>
  </div>
  <div class="modal-footer" *ngIf="footerEnabled">
    <button type="button" class="btn btn-secondary" (click)="c('Close click')">Close</button>
  </div>
</ng-template>

这可能吗？我的实际用例是在 Modal 中显示不同结构的表格。

任何帮助将不胜感激。

谢谢，普拉提克

【问题讨论】：

标签： javascript angular ng-bootstrap ng-modal

【解决方案1】：

是的，这是可能的。只需通过内部 html 绑定指令添加即可。

<ng-template #content let-c="close" let-d="dismiss">
  <div class="modal-header">
    <h4 class="modal-title">{{ModalTitle}}</h4>
    <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body" [innerHTML]="ModalContent">
  </div>
  <div class="modal-footer" *ngIf="footerEnabled">
    <button type="button" class="btn btn-secondary" (click)="c('Close click')">Close</button>
  </div>
</ng-template>

见Angular HTML binding

【讨论】：