Angular4のラテックス方程式

Question

LaTeXに方程式を表示してクライアントにレンダリングします。これらの方程式には変更が必要な変数があります。これまでのところ、私はMathJaxしか見つけられませんでしたが、変更すると値を更新しません。 http://plnkr.co/edit/FLduwmtHfkCN5XPfzMsA?p=previewのようなライブがありますが、それはAngular2のもので、それに奇妙な行があります。 MathJax.Hub.Queue(["Typeset",MathJax.Hub, this.el.nativeElement]);私にはエラーが出ます（MathJax変数が見つからないため）。 ng-katexは、ng-modulesフォルダに表示されず、奇妙な出力があるために動作しません。最初は、生成された一方で、

import { Component, OnInit } from '@angular/core'; 

@Component({ 
    selector: 'app-test', 
    template: ' 
    <button (click)="decrDenumerator()">-</button> 
    Frac: {{frac}} 
    <button (click)="incrDenumerator()">+</button>', 
    styleUrls: ['./test.component.sass'] 
}) 
export class TestComponent implements OnInit { 
    denumerator = 1; 
    frac = '$\\frac{1}{' + this.denumerator + '}$'; 

    constructor() { 
    } 

    ngOnInit() { 
    } 
    incrDenumerator() { 
    this.denumerator = Math.min(10, this.denumerator + 1); 
    this.frac = '$\\frac{1}{' + this.denumerator + '}$'; 
    } 

    decrDenumerator() { 
    this.denumerator = Math.max(1, this.denumerator - 1); 
    this.frac = '$\\frac{1}{' + this.denumerator + '}$'; 
    } 
} 

それらのいずれかのボタンをクリックし、それが唯一のテキストとして表示されます：

MathJax自体は、あなたがDOMに

例：何かを変更する場合を除いて、完璧に動作しますMathJaxからの出力はその横に表示されます。

これらの変更をMathJaxに通知し、それに応じて動作させるにはどうすればよいですか？どうもありがとうございました。

Answer 1

多くを試した後、私は答えを見つけました。

MathJaxタイプをインポートする必要がありました。 npm install --save @types/mathjax

"types": ["mathjax"]でtsconfig.app.jsonファイルにインポートしてください。

私はその後、私は完璧に動作し、次のディレクティブ

import {Directive, ElementRef, Input} from '@angular/core'; 

@Directive({ 
    selector: '[tex]' 
}) 
export class TexDirective { 
    @Input('tex') tex = ''; 
    constructor(private element: ElementRef) {} 

    ngOnInit() { 
    this.update(); 
    } 

    ngOnChanges() { 
    this.update(); 
    } 

    update() { 
    this.element.nativeElement.innerHTML = '$' + this.tex + '$'; 
    MathJax.Hub.Queue(['Typeset', MathJax.Hub, this.element.nativeElement]); 
    } 
} 

を作成しました。