Angular2でMathjaxを使用するにはどうすればよいですか？

Question

誰かがAngular2でMathjaxを使用していますか？

作成

Plunkr例： - http://plnkr.co/edit/FLduwmtHfkCN5XPfzMsA?p=preview私はディレクティブがMathJax.Hub.Queueを呼び出すために必要とされているように見える見たいくつかのAngular1例から

が、私はそれが2角度を得るために私にはかなり時間がかかります疑います文法の権利なので、すでに誰かがそれをやっているのか疑問に思いましたか？

たとえば、以下は角度1の例です。 https://github.com/ColCarroll/ngMathJax/blob/master/ng-mathjax.js

そしてmathjaxの構文はここにある： - https://docs.mathjax.org/en/v1.1-latest/typeset.html

はAngular2で似た何かをしようとしています。

更新 - 次の作品、Thierryのおかげです。

コンポーネント： -

import {Component, OnInit} from 'angular2/core'; 
import {MathJaxDirective} from './mathjax.directive'; 

@Component({ 
    selector: 'hello-mathjax', 
    templateUrl: 'app/hello_mathjax.html', 
    directives: [MathJaxDirective] 
}) 
export class HelloMathjax { 
    fractionString: string = 'Inside Angular one half = $\\frac 12$'; 
    index: number = 3; 

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

    update() { 
     this.fractionString = 'Inside Angular one third = $\\frac 1'+this.index+'$'; 
     this.index++; 
    } 

} 

指令： - それでも

import {Directive, ElementRef, Input} from 'angular2/core'; 
@Directive({ 
    selector: '[MathJax]' 
}) 
export class MathJaxDirective { 
    @Input('MathJax') fractionString: string; 

    constructor(private el: ElementRef) { 
    } 

    ngOnChanges() { 
     console.log('>> ngOnChanges'); 
     this.el.nativeElement.style.backgroundColor = 'yellow'; 
     this.el.nativeElement.innerHTML = this.fractionString; 
     MathJax.Hub.Queue(["Typeset",MathJax.Hub, this.el.nativeElement]); 
    } 
} 

私は両方の場所で再レンダーキューする必要がある理由がわかりません。

Answer 1

私は指定された式を取得するために入力して、このように実装します：

import {Directive, ElementRef, Input} from 'angular2/core'; 
@Directive({ 
    selector: '[MathJax]' 
}) 
export class MathJaxDirective { 
    @Input(' MathJax') 
    texExpression:string; 

    constructor(private el: ElementRef) { 
    } 

    ngOnChanges() { 
     this.el.nativeElement.innerHTML = this.texExpression; 
     MathJax.Hub.Queue(["Typeset", MathJax.Hub, this.el.nativeElement]); 
    } 
} 

を、この方法を使用します。http://plnkr.co/edit/qBRAIxR27zK3bpo6QipY?p=preview：

<textarea #txt></textarea> 
<span [MathJax]="txt.value"></span> 

このplunkrを参照してください。

Answer 2

この質問に基づいて、TeXの数式をAngularでタイプセットするオープンソースプロジェクトの開発に着手しました。プロジェクトはhttps://github.com/garciparedes/ng-katexです。

あなたがしてモジュールをインストールすることができます。

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { AppComponent } from './app/app.component'; 

import { KatexModule } from 'ng-katex'; 

@NgModule({ 
    imports: [BrowserModule, KatexModule], 
    declarations: [AppComponent], 
    bootstrap: [AppComponent] 
}) 

class AppModule {} 

platformBrowserDynamic().bootstrapModule(AppModule); 

そして、あなたが使用することができます：あなたの親モジュールのKatexModuleのimportにフィールドを追加するのproyectにモジュールを追加するには

​​

にそれは次のようになります：

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

@Component({ 
    selector: 'my-app', 
    template: `<ng-katex [equation]="equation">` 
}) 
export class AppComponent { 
    equation: string = ''\sum_{i=1}^nx_i''; 
} 

Answer 3

私のプロジェクトiで使用されたMathjax n角2は、次のようになります。

setTimeout（function {）{MathJax.Hub}）;}; 5）;

キューが非同期に実行されるので、setTimeoutは、ある時点後に数学レンダリングプロセスが確実に行われるようにします。