0

我在角度 5 中使用 ngx-bootstrap-modal。

我正在使用以下代码打开模式：-

 this.dialogService.addDialog(PopUpComponent, {
      title: 'Custom locale',
      message: "Hello ? "
    }).subscribe((isConfirmed) => {
      if (isConfirmed) {
        console.log('close...')
      }

我工作正常。但是当我在消息中传递 HTML 标签时，HTML 标签不会解析。按原样打印。

 this.dialogService.addDialog(PopUpComponent, {
      title: 'Custom locale',
      message: `<div class="simpleBox">sjdhfjsdhf</div>`
    }).subscribe((isConfirmed) => {
      if (isConfirmed) {
        console.log('close...')
      }

它在消息中呈现：<div class="simpleBox">sjdhfjsdhf</div>.

模态代码如下：-

<div id="NewThemePopUp" class="modal-dialog">
  <div class="modal-content">
    <div title="Close" (click)="close()" class="newCrossIcon"></div>
    <div class="modal-header">
      <h4 class="modal-title confirmBlueStrip">{{title || ''}}</h4>
    </div>
    <div class="modal-body cfUnselectable Pop_up_txt_box newtheme">
      {{message || ''}}
    </div>
    <div class="modal-footer">
      <div class="btnRow"><a class="cencel_link btnLink" (click)="close()">Cancel</a> <input
        type="button" value="Create" ng-class="CreateThemeButtonClicked? 'btn disabled':'btn'" style="float:right;"
        class="btn"></div>
    </div>
  </div>
</div>
4

1 回答 1

0

对于您的具体示例，您可以尝试以下操作：

<div id="NewThemePopUp" class="modal-dialog">
  <div class="modal-content">
    <div title="Close" (click)="close()" class="newCrossIcon"></div>
    <div class="modal-header">
      <h4 class="modal-title confirmBlueStrip">{{title || ''}}</h4>
    </div>
    <div class="modal-body cfUnselectable Pop_up_txt_box newtheme" [innerHTML]="message || ''">
    </div>
    <div class="modal-footer">
      <div class="btnRow"><a class="cencel_link btnLink" (click)="close()">Cancel</a> <input
      type="button" value="Create" ng-class="CreateThemeButtonClicked? 'btn disabled':'btn'" style="float:right;"
      class="btn"></div>
      </div>
    </div>
  </div>

请注意，通过使用此技术，您无法传递样式、脚本、url 和 resourceUrl 等属性。为了让它工作，你可以使用 DomSanitizer

于 2018-01-04T14:23:02.587 回答