AngularJS 使用管道时模板解析错误

Question

我正在尝试清理来自我无法控制的数据库的文本并将其显示为 html。我的损坏代码如下所示。

 <li *ngFor="let comm of commList|async;">
    <div class="notifBody">
      <span>
        <div [innerHTML]={{comm.text|safe : 'html'}}> </div>
      </span>
    </div>
 </li>

我得到的错误如下

compiler.es5.js:1694 Uncaught Error: Template parse errors:
Unexpected closing tag "div". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags ("
      <hr>
      <span>
        <div [innerHTML]={{comm.text|safe : 'html'}}>[ERROR ->]</div>
      </span>
    </div>

我猜我在我的语法中遗漏了一些东西但不确定是什么。

如果我按如下所示删除安全管道，它可以正常工作并将文本呈现为 html...（未清理）。

    <div class="notifBody">
      <span>
        <div [innerHTML]=comm.text></div>
      </span>
    </div>

以下管道测试也按预期工作，但文本不会呈现为 html。

<div class="notifBody">
  <span>
    {{comm.text|safe : 'html'}}
  </span>
</div>

Safe 管道只是使用来自 angular 核心的 Sanitizer 清理传递的字符串，如下所示。

 import { Pipe, Sanitizer, SecurityContext } from '@angular/core';
 ...
 public transform(value: string, type: string): string {
    switch (type) {
        case 'html':
            return this.sanitizer.sanitize(SecurityContext.HTML, value);
    ...}}

谢谢！

Answer 1

您可以使用：

[innerHTML]="comm.text|safe : 'html'"

或

innerHTML="{{comm.text|safe : 'html'}}"

但是你混合了两种语法[innerHTML]={{comm.text|safe : 'html'}}

您可以在此处阅读更多相关信息：https://angular.io/guide/template-syntax#interpolation----

AngularJS 使用管道时模板解析错误

AngularJS template parse error when using pipe

angular

typescript

angular-pipe