具有Angular4的乳胶方程

Question

我想在LaTeX中显示方程式并在客户端呈现它们。那些方程有必须改变的变量。到目前为止，我只发现了MathJax，但它们在更改时不会更新值。有像http://plnkr.co/edit/FLduwmtHfkCN5XPfzMsA?p=preview这样的例子，它确实会改变现场，但那是来自Angular2，并且有一些奇怪的线条，它让我有一个错误（因为我找不到MathJax变量）MathJax.Hub.Queue(["Typeset",MathJax.Hub, this.el.nativeElement]);。 ng-katex无法正常工作，因为它没有显示在我的ng-modules文件夹中，并且输出结果很奇怪。

MathJax本身可以很好地工作，除非你在DOM中改变某些东西

E.g：

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

然后使用"types": ["mathjax"]将它们导入tsconfig.app.json文件中。

然后我创建了以下指令

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

我工作得很完美。