``` 代码: ```ts import {Component, Input, On">

Angular 使用 Katex 渲染 MathML

模板:

<div class="katex" #katexNode [ngStyle]="inline ? inlineStyle: blockStyle">
</div>

代码:

import {Component, Input, OnInit, AfterViewInit, ViewChild, ElementRef} from '@angular/core';
import katex from 'katex';

@Component({
  selector: 'ka-tex',
  templateUrl: './katex.component.html',
  styleUrls: ['./katex.component.scss']
})
export class KatexComponent implements OnInit, AfterViewInit {

  @Input()
  expression = '';

  @Input()
  inline = true;

  // @ts-ignore
  @ViewChild('katexNode')
  node: ElementRef;

  constructor() { }

  ngOnInit() {
  }

  get inlineStyle() {
    return {
      display: 'inline-block',
      padding: '0 10px',
    };
  }

  get blockStyle() {
    return {
      display: 'block',
      padding: '10px 0',
      'text-align': 'center'
    };
  }

  ngAfterViewInit() {
    katex.render(this.expression, this.node.nativeElement, {
      throwOnError: false,
      output: 'mathml'
    })
  }

}

使用方式:

<div>
  <span>Math:</span>
  <ka-tex expression="c = \pm\sqrt{a^2 + b^2}" [inline]="false"></ka-tex>
</div>