时间戳

首页 > 解决方案 > ngx-MathJax 重新渲染指令无法重新渲染

angular - ngx-MathJax 重新渲染指令无法重新渲染

问题描述

我目前正在尝试呈现动态 MathJax 内容：

<div mathjax #math>
    $$Weight = {{ mass }} * {{ g }}$$
</div>

这工作正常，直到我在更改一些变量后尝试重新渲染。因此，例如，如果我改变了质量，那么我希望上面 HTML 中的值也会改变。

为此，我需要对MathJax 指令的实例执行MathJaxTypeset()调用，因此按照ngx-mathjax github 页面上的说明：

我使用 viewchild 来获取页面上的实例...

@ViewChild('math', { static: false, read: MathJaxDirective }) mathsExpressions?: MathJaxDirective;

然后在需要更新时在它们上运行 MathJaxTypeset()...

makeNewValues(): void {
    this.mathsExpressions.MathJaxTypeset();
}

但是，这会产生错误...

ERROR TypeError: Cannot read properties of undefined (reading 'MathJaxTypeset')

我在指令的使用和操作方面没有经验，因此不确定我如何以及为什么会收到错误。如果似乎无法找到要排版的实例，我认为问题出在 viewchild 中。

更新

这是使用较新的模块 mathjax-angular 的 stackblitz 。您会注意到模板中有三行代码显示了 mathjax 样式值。前两个：

<div [mathjax]="displayString"></div>
<div [mathjax]>{{ displayString }}</div>

两者都在运行时工作，看起来相同，但只有顶部的值在更新时重新呈现。这不太理想，因为这意味着将文档的内容分成 .ts 和 .html 文件，然后在更新任何值时使用 mathjax 代码手动更新字符串。

第三个奉献：

<div [mathjax]>$$Random = {{ randomNumber }}$$</div>

在我的代码中呈现，但不在 stackblitz 上 - 样式或依赖项之间没有区别。SB 上的 Angular 是 v12，我使用的是 v13，但这是唯一的区别。如果这渲染得当，那将正是我想要的......

我想要的是在更新值时更新 HTML（第三行）中的内联代码。

已经尝试过

SO上的大部分内容似乎与AngularJS相关或不特定于ngx-angular，但SO上的这个线程似乎是同样的问题。然而，该解决方案并没有改变我自己的代码的任何内容。

app.module.ts

在我的 app.module.ts 我有：

MathJaxModule.forRoot()

标签： angularmathjax

解决方案

该库的 GitHub 存储库（不再维护）列出了类似的问题：https ://github.com/davidshen84/ngx-mathjax/issues/10#issue-525662151 ，但没有明确的解决方案。

您可以MathJax直接用作脚本，而不是 via ngx-mathjax，尽管似乎有替代方法可用mathjax-angular. 快速查看源代码，该库会head script为您创建元素，因此可能值得一试：

https://github.com/sajivkumar/mathjax-angular

一旦更改了属性名称，您问题中的第三个选项似乎就可以正常工作：randomnumber->randomNumber

推荐阅读