Question

我在角度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>

Answer 1

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

<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

ngx-bootstrap-modal modal不解析html元素

1 个答案: