角度警告：清理 HTML 会删除一些内容？

Question

嘿，我正在尝试通过在模态正文中编写 html 来在模态中显示搜索栏，如下所示：

onClick() {
      const dialogRef = this.modal.alert()
        .size('lg')
        .showClose(true)
        .title('A simple Alert style modal window')
        .body(`
          <div class="card container-fluid col-xs-10">
          <div class="card-block">
              <div class="form-group row">
                  <div class="col-5">
                      <ng2-completer class="completer-limit"
                                     [(ngModel)]="searchStr"
                                     [datasource]="dataService"
                                     [minSearchLength]="0"
                                     [inputClass]="'form-control'"
                                     [placeholder]="'Enter the class you would like to add'"
                                     [matchClass]="'match'"
                                     [autofocus]="true"
                                     [textSearching]="false">
                      </ng2-completer>
                  </div>
              </div>
          </div>
      </div>`)
        .open();
    }

.body 中的 html 试图引用与 onClick 函数相同的 .ts 文件中的数据。作为参考，在相应的 html 文档中运行这个 html 效果很好（不是在模式中）。在模式中添加通用 html 也可以正常工作（简单文本）。但是，当我添加此代码时，搜索栏未呈现，并且在开发人员控制台中显示：警告：清理 HTML 删除了一些内容（请参阅http://g.co/ng/security#xss）。有人知道发生了什么吗？对不起，如果这个问题很棘手，因为我正在使用包。它们是搜索栏的 ng2-completer 和模态的 ngx-modialog。我认为这个问题可能是根本问题，与软件包无关，但这就是我在 stackoverflow 上询问的原因。由于模板指向单独的 html 文件，模态正文中的 html 无法引用此 onClick 函数所在的 .ts 文件，还是我仍然可以引用 .ts 文件中的对象？

Answer 1

问题是您将字符串中的 HTML 传递给 modal.alert().body() 函数

所以 Angular 不信任它。它可能是代码注入的来源，因此已被清除。您需要找到另一种方法 - 您的模态是否接受模板或组件作为参数，如果是，那将是这样做的方法。