如何让 Mathjax 与 Angular2 一起工作？答案

【问题标题】：How to get Mathjax working with Angular2?如何让 Mathjax 与 Angular2 一起工作？
【发布时间】：2016-07-22 02:47:00
【问题描述】：

有没有人让 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]);
    }
}

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

【问题讨论】：

上面的 plunkr 现在正确初始化并且 Angular 正确显示了 MathJax，但在数据更新上仍然不能正常工作（点击 plunkr 按钮查看）。有什么想法吗？

标签： angular mathjax angular2-directives

【解决方案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。

【讨论】：

您好 Thierry，很想看看您的工作示例。当数据更新时，我上面的仍然有“怪异”。检查 plunkr 并单击按钮两次 :)
ngOnChanges 只会在绑定更新时被调用。这就是为什么我使用@Input...
我让它与触发 ngOnChange 的 @input 一起工作，但结果仍然不如预期。旧的 1/2 并没有像预期的那样被新的 1/3 替换，但都显示了。
我更新了您的 plunkr 以使其适用于我提出的解决方案：plnkr.co/edit/qBRAIxR27zK3bpo6QipY?p=preview。
效果很好。我需要取消注释 ngOnInit 命令，以便它初始化确定。非常感谢您的帮助！

【解决方案2】：

基于这个问题，我开始开发一个开源项目，用 Angular 排版 TeX 数学表达式。该项目位于https://github.com/garciparedes/ng-katex。

您可以使用以下方式安装模块：

npm install ng-katex --save

要将模块添加到您的项目中，请将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'';
}

【讨论】：

【解决方案3】：

我在 Angular 2 的项目中使用了 Mathjax，如下所示：

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

由于队列异步运行，setTimeout 确保数学渲染过程在某个时间点之后发生。

【讨论】：

【解决方案4】：

问题是 Angular 2 的模板生成器正在寻找文件结尾字符 '{' 或在文件末尾 (EOF) 的 html 文件中发现一些意外的内容。

为了能够将 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: [['$','$'], ['\\(','\\)']]}});

【讨论】：