如何将动态 HTML 标签传递给 bootstrap 模式？

Question

考虑组件通用对话框

<div class="modal-header">
    <h4 class="modal-title">  {{heading}}  </h4>
    <button type="button" class="close" aria-label="Close"  ">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>

  <div class="modal-body">
    BODY COMES HERE
  </div>

  <div class="modal-footer">
     FOOTER COMES HERE
  </div>


const modalRef = this.modalService.open(CommonDialogComponent,  { size: 'lg' });


modalRef.componentInstance.heading = 'Choose an email template';
modalRef.componentInstance.body= '<h1>BODY</h1>';

最后一行在模式 ui 中将显示为 <h1>BODY</h1>。我怎样才能将它作为 html 标记传递，以便它在模态 window 中正确呈现。 modalRef.componentInstance只能传递字符串如何传递html内容。 我正在尝试创建一个带有动态页眉、正文和页脚的通用通用对话框组件。

Answer 1

这是在通用模态组件中添加 html 的方法：

<div class="modal-header">
    <h4 class="modal-title">  {{heading}}  </h4>
    <button type="button" class="close" aria-label="Close"  ">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>

  <div class="modal-body" [innerHtml]="body">
  </div>

  <div class="modal-footer" [innerHtml]="footer">
     FOOTER COMES HERE
  </div>


const modalRef = this.modalService.open(CommonDialogComponent,  { size: 'lg' });


modalRef.componentInstance.heading = 'Choose an email template';
modalRef.componentInstance.body= '<h1>BODY</h1>';
modalRef.componentInstance.footer= '<h1>FOOTER</h1>';

如何将动态 HTML 标签传递给 bootstrap 模式？

How to pass dynamic HTML tag to a bootstrap modal?

bootstrap-modal

bootstrap-4

ng-bootstrap

angular