有没有人让 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",MathJax.Hub, this.el.nativeElement]);
}
}
仍然不确定为什么我需要在两个地方排队重新渲染。
最佳答案
我会通过输入来实现这种方式来获取指定的表达式:
import {Directive, ElementRef, 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", MathJax.Hub, this.el.nativeElement]);
}
}
并以这种方式使用:
<textarea #txt></textarea>
<span [MathJax]="txt.value"></span>
关于angular - 如何让 Mathjax 与 Angular2 一起工作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36370826/