使用Mathjax Inside typeScript/Angular2组件

Question

我在我的Angular2组件中调用Mathjax.hub函数时遇到困难。昨晚我为此挣扎了很多小时。我需要调用MathJax API来重新渲染一些动态粘合的InnerHTML字符串。问题是，无论我如何导入MathJax模块或NPM安装它，我都无法访问组件中的MathJax全局变量。我通过尝试Mathjax.version和编译器抱怨无法找到未定义的版本来验证这一点。

我已经在模块中运行了NPM安装Mathjax。运行NPM安装@Typings Mathjax。已经尝试导入MathJaxDirovextive。在MathJax安装时提供的示例HTML中，我可以看到正确应用了格式。访问我的打字稿中的MathJax全局变量的正确方法是什么？

Answer 1

我找到了一个简单的解决方案。如下：

1. 在 index.html

   中添加以下代码

       <script type="text/x-mathjax-config">
           MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\(','\)']]}});
       </script>
       <script type="text/javascript" async
               src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_CHTML">
       </script>
   

2. 在您的打字稿文件中添加此行作为导入：

       declare var MathJax:any;
   

3. 使用Mathjax：

       MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
   

Answer 2

根据本文支持Angular2中的Mathjax，typescript

如果我们使用Angular2绑定数据并在UI端进行渲染，我们可能会发现MathJax文本未呈现。那是因为我们每次更改它都需要重新渲染字符串值。

有一个简单的模块示例要处理，使用事件处理程序绑定，并在值更改时将其构造。

import { Directive, ElementRef, OnChanges, Input } from "@angular/core";
declare var MathJax: {
  Hub: {
    Queue: (param: Object[]) => void;
  };
};
@Directive({ selector: "[mathJax]" })
export class MJD implements OnChanges {
  @Input("mathJax") private value: string = "";
  constructor(private element: ElementRef) {}
  ngOnChanges() {
    this.element.nativeElement.innerHTML = this.value;
    MathJax.Hub.Queue(["Typeset", MathJax.Hub, this.element.nativeElement]);
  }
}

在模板html文件上，我们可以使用这样的指令：

<div class="math-element" id="equation" [mathJax]="equationTexString"></div>

另一方面，请记住将MJD指令添加到组件指令列表中：

@Component({
  selector: "equation-component",
  directives: [MJD],
})
export class EquationComponent {
  private equationTexString: string = "";
}