Angular domSanitizer绕过属性外部的SecurityTrustHTML

我想让MathJax和Angular一起跑。我使用MathJax集成到Angular中。这是我目前的代码：

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

我想将格式化的html与呈现的MathJax方程一起插入。但我只有一件事要做：

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

html被净化，因此html标记被打印为文本。不过，MathJax方程是正确呈现和更新的。在

innerHtml

之外使用

keepHtml

-管道，就像在第一个代码段中一样，抛出错误

SafeValue必须使用[property]=binding…

。我怎样才能让所有的东西一起工作

编辑

这是我的MathJax配置：

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

---

如果您的innerHtml更新，您可以使用

MathJaxTypeset（）

更新视图：

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

---

这是一个简单的示例，几乎没有检查，我只是假设您需要使用setTimeout进入下一个检测周期。您还可以考虑对

字段使用getter和setter，并在那里触发它。也许你甚至可以使用
管道
本身，但我不完全确定
你能告诉我你的
MathJaxModule.forRoot
配置吗？我把它添加到了问题中，我正试图创建一个stackblitz，但它似乎没有任何作用。我可以在模板中获得对该指令的引用，但它只是显示纯文本。我做错了什么吗？实际上发布stackblitz链接会很方便：我也尝试过，但是MathJaxTypeset（）方法在调用时什么都不做。当您更新
innerHtml
MathJaxModule.forRoot({
      version: '2.7.5',
      config: 'TeX-AMS_HTML',
      hostname: 'cdnjs.cloudflare.com'
}),

<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());
  }
}