Come far funzionare Mathjax con Angular2?

Question

Qualcuno ha mai provato Mathjax a lavorare con Angular2?

Plunkr esempio creato: - http://plnkr.co/edit/FLduwmtHfkCN5XPfzMsA?p=preview

Da alcuni esempi Angular1 che ho visto sembra che sia necessaria una direttiva per chiamare MathJax.Hub.Queue, ma ho il sospetto che mi ci vorrà un bel po 'per ottenere il angolare 2 sintassi giusto, quindi mi chiedevo se qualcuno l'ha già fatto?

ad esempio il seguente è un esempio Angolare 1. https://github.com/ColCarroll/ngMathJax/blob/master/ng-mathjax.js

E la sintassi mathjax è qui: - https://docs.mathjax.org/en/v1.1-latest/typeset.html

Cercando di fare qualcosa di simile in Angular2.

AGGIORNAMENTO - i seguenti lavori, grazie a Thierry.

Componente: -

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++; 
    } 

} 

direttiva: -

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

Ancora non è sicuro perché ho bisogno di fare la coda la ri-renderizzare in entrambi i luoghi.

Answer 1

avrei implementare questo modo con un ingresso per ottenere l'espressione specificata:

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

E utilizzare in questo modo:

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

Vai a questa plunkr: http://plnkr.co/edit/qBRAIxR27zK3bpo6QipY?p=preview.

Answer 2

Sulla base di questa domanda, ho iniziato lo sviluppo di un progetto open source per la composizione di espressioni matematiche di TeX con Angular. Il progetto è il https://github.com/garciparedes/ng-katex.

È possibile installare il modulo con:

npm install ng-katex --save 

Per aggiungere il modulo al proyect aggiungere il campo KatexModule-import s' del modulo genitore:

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

E poi si può usare esso come segue:

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

Mathjax utilizzato nel mio progetto i n Angolare 2 come segue:

setTimeout (function() {MathJax.Hub.Queue (["Typeset", MathJax.Hub]);}, 5);

poiché la coda viene eseguita in modo asincrono, il setTimeout garantisce che il processo di rendering matematico avvenga dopo un certo periodo di tempo.