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>';

最后一行将在模式用户界面中显示为 <h1>BODY</h1> 。我如何将其作为html标签传递，以便它在模式窗口中正确呈现。 modalRef.componentInstance只能传递字符串如何传递html内容。 我正在尝试创建具有动态页眉，正文和页脚的通用commondialog组件。

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标记传递给引导模式？

1 个答案: