如何让 Mathjax 与 Angular2 一起工作? [英] How to get Mathjax working with Angular2?

问题描述

有没有人让 Mathjax 与 Angular2 一起工作?

Has anyone gotten Mathjax working with Angular2 ?

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

Plunkr example created :- http://plnkr.co/edit/FLduwmtHfkCN5XPfzMsA?p=preview

从一些 Angular1 示例中，我看到调用 MathJax.Hub.Queue 似乎需要一个指令，但我怀疑我需要很长时间才能正确使用 Angular 2 语法，所以我想知道是否有人已经这样做了它吗?

From some Angular1 examples I saw it looks like a directive is needed to call MathJax.Hub.Queue, but I suspect it will take me quite a while to get the Angular 2 syntax right, so I wondered if anyone has already done it ?

例如以下是一个 Angular 1 示例.https://github.com/ColCarroll/ngMathJax/blob/master/ng-mathjax.js

e.g the following is an Angular 1 example. https://github.com/ColCarroll/ngMathJax/blob/master/ng-mathjax.js

mathjax 语法在这里:-https://docs.mathjax.org/en/v1.1-latest/typeset.html

And the mathjax syntax is here :- https://docs.mathjax.org/en/v1.1-latest/typeset.html

尝试在 Angular2 中做类似的事情.

Trying to do something similar in Angular2.

更新 - 以下作品，感谢蒂埃里.

UPDATE - the following works, thanks to 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]);
    }
}

仍然不知道为什么我需要在两个地方排队重新渲染.

Still not sure why I need to queue the re-render in both places.

推荐答案

我会用输入来实现这种方式以获得指定的表达式:

I would implement this way with an input to get the specified expression:

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.

See this plunkr: http://plnkr.co/edit/qBRAIxR27zK3bpo6QipY?p=preview.

这篇关于如何让 Mathjax 与 Angular2 一起工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！