Angular 5中ngx-bootstrap-modal无法解析HTML元素问题

这问题我之前做Angular项目时也碰到过，根源其实很简单：Angular为了防范XSS攻击，默认会对{{}}插值表达式里的内容做HTML转义处理，所以你传入的HTML标签才会被当作纯文本原样输出。

下面给你两种解决方案，按需选择：

方案1：直接使用[innerHTML]绑定（适用于内容完全可控的场景） #

修改你的模态框模板中渲染message的部分，把原来的插值表达式替换成Angular的[innerHTML]属性绑定：

<div class="modal-body cfUnselectable Pop_up_txt_box newtheme" 
     [innerHTML]="message || ''">
</div>

[innerHTML]会把绑定的内容当作HTML解析渲染，而不是纯文本，这样你的<div class="simpleBox">...</div>就能正常显示成带样式的盒子了。

方案2：结合DomSanitizer处理（适用于包含用户输入的场景） #

如果你的message可能包含用户输入的内容，直接用innerHTML会有XSS攻击风险，这时候需要用Angular的DomSanitizer把内容标记为安全的HTML：

1. 在你的PopUpComponent中注入DomSanitizer并处理message：

import { Component, Input } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Component({
  selector: 'app-pop-up',
  templateUrl: './pop-up.component.html'
})
export class PopUpComponent {
  @Input() title: string;
  private _safeMessage: SafeHtml;

  constructor(private sanitizer: DomSanitizer) {}

  @Input() set message(rawMessage: string) {
    // 将原始HTML标记为安全内容
    this._safeMessage = this.sanitizer.bypassSecurityTrustHtml(rawMessage || '');
  }

  get message(): SafeHtml {
    return this._safeMessage;
  }

  // 你的close方法等逻辑...
  close() {
    // 关闭模态框的逻辑
  }
}

2. 模板里依然使用[innerHTML]绑定处理后的message：

<div class="modal-body cfUnselectable Pop_up_txt_box newtheme" 
     [innerHTML]="message">
</div>

这样不管是你自己写的HTML还是经过处理的用户输入内容，都能安全地被解析渲染了。

最后验证一下，再调用addDialog传入带HTML标签的message，模态框里就会正确显示对应的HTML元素啦！

内容的提问来源于stack exchange，提问作者Dinesh Rawat