Angular 2.0 und Mathjax funktionieren nicht gut

Question

Ich habe eine halb funktionierende Ausgabe von mathjax mit eckigem 2.0 zusammengebaut, aber es bricht auf eine Weise, die ich nicht ganz erfassen kann. Ich habe unten einen Plunkr hinzugefügt, um die Situation klar zu demonstrieren.

In meinem Code (nicht die plunkr) das ist mein relevant 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> 

und dies ist die entsprechende Update-Funktion aus dem HTML ausgelöst:

@ViewChild('result')  result  : ElementRef; 

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

Schließlich ist dies meine Mathjax Konfiguration :

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

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

Answer 1

Es scheint die Hauptfrage hier ist, wie wiederholt den Inhalt der <textarea> in einen separaten Bereich der Seite mit MathJax. Dies ist in einem einfachen Fall in der Modifying Math on the Page documentation abgedeckt.

Grundsätzlich haben Sie zwei Möglichkeiten:

Option 1 Halte ahold des Mathe-Elements gerendert und dann verwenden, um die Text Funktion neu zu machen mit einem neuen Mathe-String (Hinweis: Dies erfordert, dass die gesamte Textarea ist eine große Mathe-String, nicht normalen Text mit Mathe-Strings durchsetzt) ​​Plunker:

HTML:

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

Hallo-mathjax.ts (Teil):

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

Option 2 die renderd div den Inhalt des Textbereiches jedes Mal, abwischen und komplett neu machen. (Dies ist der Weg zu gehen, wenn das Textfeld eine Mischung aus mathstrings und normalen Text enthält) Plunker:

HTML:

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

hallo-mathjax.ts (Teil):

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"]); 
} 

Diese Plunker zeigt rendering a <textarea> that contains a mix of non-math and math statements (e.g. test test $\frac 12$)

Diese Plunker zeigt rendering a <textarea> that should be interpreted entirely as math statements (e.g. \frac {11}2)