Угловые 2.0 и Mathjax не работают хорошо

Question

Я собрал полурабочее издание mathjax с угловым 2.0, но оно ломается так, как я не могу понять. Я добавил планшет ниже, чтобы четко продемонстрировать ситуацию.

В моем коде (не 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

Похоже, главный вопрос заключается в том, как повторно отображать содержимое <textarea> в отдельную область страницы с использованием MathJax. Это описано в простом случае в Modifying Math on the Page documentation.

В основном у вас есть два варианта:

Вариант 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 уничтожить renderd Div каждый раз и полностью повторно вынести содержимое текстового поля. (Это путь, если текстовое поле будет содержать смесь mathstrings и обычного текста) Plunker:

HTML:

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

привет-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"]); 
} 

Это plunker демонстрирует rendering a <textarea> that contains a mix of non-math and math statements (e.g. test test $\frac 12$)

Это Plunker демонстрирует rendering a <textarea> that should be interpreted entirely as math statements (e.g. \frac {11}2)