有没有人让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]); } }
仍然不确定为什么我需要在两个地方排队重新渲染.
我将使用输入实现这种方式来获取指定的表达式:
原文链接:https://www.f2er.com/angularjs/143401.htmlimport {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.