使用Angular4编写Latex公式

Question

我想在客户端中显示LaTeX方程式并呈现它们。这些方程式有变量需要更改。目前，我只找到了MathJax，但它不会在值更改时更新。有一些示例，例如http://plnkr.co/edit/FLduwmtHfkCN5XPfzMsA?p=preview，可以实时更改，但那是来自Angular2的，并且有一些奇怪的行：MathJax.Hub.Queue（["Typeset"，MathJax.Hub，this.el.nativeElement]）; 这使我出现错误（因为我找不到MathJax变量）。 ng-katex也不起作用，因为它不会显示在我的ng-modules文件夹中，并且输出结果很奇怪。

MathJax本身完美运作，除非您更改DOM中的某些内容

例如：

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

@Component({
  selector: 'app-test',
  template: '
  <button (click)="decrDenumerator()">-</button>
  Frac: {{frac}}
  <button (click)="incrDenumerator()">+</button>',
  styleUrls: ['./test.component.sass']
})
export class TestComponent implements OnInit {
  denumerator = 1;
  frac = '$\\frac{1}{' + this.denumerator + '}$';

  constructor() {
  }

  ngOnInit() {
  }
  incrDenumerator() {
    this.denumerator = Math.min(10, this.denumerator + 1);
    this.frac = '$\\frac{1}{' + this.denumerator + '}$';
  }

  decrDenumerator() {
    this.denumerator = Math.max(1, this.denumerator - 1);
    this.frac = '$\\frac{1}{' + this.denumerator + '}$';
  }
}

当单击这些按钮中的任意一个时，它只会显示文本，而来自MathJax的第一个生成输出将会在其旁边。

我该如何使MathJax注意到这些更改并相应地作出反应？非常感谢。

- Albêr

---

你可能想添加一些你所尝试过的示例。在Stackoverflow上要求别人给你一个解决方案并不适合。 - Peter Krautzberger

@PeterKrautzberger，我添加了一些示例代码。 - Albêr

Answer 1

尝试很多之后，我找到了答案。

我必须导入MathJax类型。 npm install --save @types/mathjax

然后在tsconfig.app.json文件中导入它们 "types": ["mathjax"].

接下来我创建了以下指令：

import {Directive, ElementRef, Input} from '@angular/core';

@Directive({
  selector: '[tex]'
})
export class TexDirective {
  @Input('tex') tex = '';
  constructor(private element: ElementRef) {}

  ngOnInit() {
    this.update();
  }

  ngOnChanges() {
    this.update();
  }

  update() {
    this.element.nativeElement.innerHTML = '$' + this.tex + '$';
    MathJax.Hub.Queue(['Typeset', MathJax.Hub, this.element.nativeElement]);
  }
}

它完美地工作。

- Albêr

---

如何使用这个指令？ - Pratik Singhal

它说MathJax未定义。已安装(js + typings)并将其添加到tsconfig.app.json中。有什么建议吗？ - Felix Lemke