Angular domSanitizer 绕过属性之外的SecurityTrustHtml

Question

我正在尝试让 MathJax 和 Angular 一起运行。我使用ngx-mathjax 作为 Angular 的 MathJax 集成。到目前为止，这是我的代码：

<div mathjax>
  {{ field | keepHtml }}
</div>

field 包含 html（用于格式化）和 MathJax 公式的混合，例如<b>This</b> is an example <b>equation</b>: \( 2x+3=2 \)。 keepHtml 是一个自定义管道，它利用 DomSanitizer 绕过 html 卫生：

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

@Pipe({
  name: 'keepHtml',
  pure: false
})
export class KeepHtmlPipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {
  }

  transform(content: string): SafeHtml {
    return this.sanitizer.bypassSecurityTrustHtml(content);
  }
}

我想将格式化的 html 与渲染的 MathJax 方程一起插入。但我只运行一件事：

<div mathjax [innerHtml]="field | keepHtml">
</div>

... 只工作一次，只要field 更新，MathJax 就不再更新方程了。当我这样做时

<div mathjax>
  {{ field }}
</div>

html 已被清理，因此 html-tags 被打印为文本。 MathJax 方程虽然被正确渲染和更新。在第一个代码 sn-p 中使用 innerHtml 之外的 keepHtml-Pipe 会引发错误 SafeValue must use [property]=binding...。我如何让所有东西协同工作？

编辑

这是我的 MathJax 配置：

MathJaxModule.forRoot({
      version: '2.7.5',
      config: 'TeX-AMS_HTML',
      hostname: 'cdnjs.cloudflare.com'
}),

Answer 1

如果您的 innerHtml 更新，您可以使用 MathJaxTypeset() 更新视图：

<div mathjax #math>
  {{ field | keepHtml }}
</div>

@Component({...})
export class ExampleComponent {
  @ViewChild('math', { static: false, read: MathJaxDirective })
  mathJax?: MathJaxDirective;

  updateField(html: string): void {
    this.field = html;

    setTimeout(() => this.mathJax.MathJaxTypeset());
  }
}

这是一个几乎没有检查的简单示例，我只是假设您需要使用 setTimeout 才能进入下一个检测周期。您还可以考虑为field 使用getter 和setter 并在那里触发它。也许你甚至可以使用Pipe 本身，但我不完全确定