如何让Mathjax与Angular2一起使用?

前端之家收集整理的这篇文章主要介绍了如何让Mathjax与Angular2一起使用?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
有没有人让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",this.el.nativeElement]);
    }
}

仍然不确定为什么我需要在两个地方排队重新渲染.

我将使用输入实现这种方式来获取指定的表达式:
import {Directive,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",this.el.nativeElement]);
    }
}

并使用这种方式:

<textarea #txt></textarea>
<span [MathJax]="txt.value"></span>

看到这个plunkr:http://plnkr.co/edit/qBRAIxR27zK3bpo6QipY?p=preview.

原文链接:https://www.f2er.com/angularjs/143401.html

猜你在找的Angularjs相关文章