Как передать динамический HTML-тег в модал начальной загрузки? - PullRequest
Новая
       33

Как передать динамический HTML-тег в модал начальной загрузки?

0 голосов
/ 10 октября 2018

Рассмотрим общий диалог компонента. 

<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 с динамическим заголовком, телом и нижним колонтитулом.

1 Ответ

0 голосов
/ 10 октября 2018

Вот способ добавить 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>';
...