Question

我还在挖掘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>

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

任何帮助将不胜感激。

谢谢， PRATIK

Answer 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 2 html binding

我可以动态呈现NgModal的HTML吗？

1 个答案: