带有 Angular4 的乳胶方程

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 注意到这些变化并采取相应的行动？非常感谢。

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

我工作完美。