我可以动态呈现NgModal的HTML

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> 

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

任何帮助将不胜感激。

感谢， 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