如何讓Mathjax與Angular2一起使用？

Question

有沒有人讓Mathjax與Angular2合作？

Plunkr示例創建： - http://plnkr.co/edit/FLduwmtHfkCN5XPfzMsA?p=preview

從一些Angular1示例中我看到它看起來需要一個指令來調用MathJax.Hub.Queue，但我懷疑我需要花很長時間才能使Angular 2語法正確，所以我想知道是否有人已經完成了它？

例如，以下是Angular 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]);
    }
}

並使用這種方式：

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

請參閱此plunkr： http ：//plnkr.co/edit/qBRAIxR27zK3bpo6QipY？p = preview。

Answer 2

基於這個問題，我開始開發一個開源項目，用Angular排版TeX數學表達式。 該項目位於https://github.com/garciparedes/ng-katex 。

您可以使用以下命令安裝模塊：

npm install ng-katex --save

要將模塊添加到proyect，請將KatexModule添加到父模塊的import字段中：

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

然后你可以按如下方式使用它：

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

在我的Angular 2項目中使用Mathjax如下：

setTimeout（function（）{MathJax.Hub.Queue（[“Typeset”，MathJax.Hub]）;}，5）;

當隊列異步運行時，setTimeout確保數學渲染過程在某個時間點之后發生。

Answer 4

問題是，角度為2的模板生成器正在尋找文件結尾char'{'或在文件末尾的html文件中找到意外的東西（EOF）。

為了能夠將MathJax與Angular 2模板生成器一起使用：

<h1>example not working = $$ 2^{x + 2 } $$</h1>

<h1>example working = $$ 2^{{ '{' }} x + 2 {{ '}' }} $$</h1>

只需使用{{'{'}}或{{'}'}}，而不是html標記內的簡單“{”。

別忘了將它添加到index.html標記中：

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