Angular 2.0和Mathjax无法正常工作

Question

我用angular 2.0拼凑了mathjax的半工作版，但是它以我不太了解的方式崩溃了。 我在下面添加了一个punkr以清楚地说明这种情况。

在我的代码（不是plunkr）中，这是我相关的html：

<textarea
    #editorArea
    ngDefaultControl
    spellcheck="false"
    class="editor"
    [(ngModel)]='assignment.content.text'
    (keyup)="updateResult()"
    [ngStyle]="{'height' : formatDimension(editorDimensions.height), 'padding' : formatDimension(editorDimensions.padding)}
"></textarea>

<div class="result" #result>{{ editorArea.value }}</div>

这是从HTML触发的相关更新功能：

@ViewChild('result')     result     : ElementRef;

updateResult() {
    MathJax.Hub.Queue(["Typeset", MathJax.Hub, this.result.nativeElement]);
}

最后，这是我的mathJax配置：

<script type="text/x-mathjax-config">
    MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
</script>

http://plnkr.co/edit/lEJZZaxKUYxFGdLtWW7Z?p=preview

Answer 1

似乎这里的主要问题是如何使用MathJax将<textarea>的内容重复呈现到页面的单独区域中。 在Page文档上的Modifying Math中，有一个简单的例子介绍了这一点。

基本上，您有两种选择：

选项1保留渲染的数学元素，然后使用Text函数以新的数学字符串重新渲染（注意：这要求整个文本区域是一个大的数学字符串，而不是散布着数学字符串的普通文本） Plunker ：

HTML：

<div id="result">$ $ <!-- empty mathstring as placeholder -->

hello-mathjax.ts（部分）：

ngOnInit() {
  var self = this;

  // callback function saves the rendered element, so it can
  // be re-rendered on update with the "Text" function.

  MathJax.Hub.Queue(
    ["Typeset",MathJax.Hub,"result"],
    function () {self.resultElement = MathJax.Hub.getAllJax("result")[0]; 
      self.updateResult();
      }
  );

}

updateResult () {
  // re-render the same element with the value from the textarea
  MathJax.Hub.Queue(["Text",this.resultElement,this.inputValue]);
}        
updateResult () {
  MathJax.Hub.Queue(["Text",this.resultElement,this.inputValue]);
}

选项2每次清除渲染的div，然后完全重新渲染textarea的内容。 （如果文本区域包含数学字符串和常规文本的混合，这是一种方法） Plunker ：

HTML：

<div id="result"></div> <!-- No placeholder math string needed -->

hello-mathjax.ts（部分）：

ngOnInit() {
  var self = this;
  MathJax.Hub.Queue(
    ["Typeset",MathJax.Hub,"result"],
    function () { 
      self.updateResult();
      }
  );
}

updateResult () {
  var resultDiv = document.getElementById("result");
  // Replace the rendered content entirely
  // with the bare text from the textarea.
  resultDiv.innerHTML = this.inputValue;
  // Rerender the entire resultDiv
  MathJax.Hub.Queue(["Typeset",MathJax.Hub,"result"]);
}

该插件展示了如何渲染包含非数学和数学语句（例如test test $\\frac 12$ ）的<textarea>

此Plunker演示了呈现一个<textarea> ，该<textarea>应该完全解释为数学语句（例如\\frac {11}2 ）