Angular4 라텍스 방정식

방정식을 LaTeX에 표시하고 클라이언트 측으로 렌더링하려고합니다. 이 방정식에는 변경해야하는 변수가 있습니다. 지금까지 MathJax 만 찾았지만 변경 될 때 값을 업데이트하지 않습니다. http://plnkr.co/edit/FLduwmtHfkCN5XPfzMsA?p=preview과 같이 라이브가 변경되는 예제가 있지만 Angular2에서 나온 것입니다. MathJax.Hub.Queue(["Typeset",MathJax.Hub, this.el.nativeElement]);에 오류가 있습니다 (MathJax 변수를 찾을 수 없기 때문에). ng-katex는 ng-modules 폴더에 나타나지 않고 이상한 출력을하기 때문에 작동하지 않습니다. 첫 번째 생성하면서,Angular4 라텍스 방정식

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 자체는 당신이 DOM에

예 : 뭔가를 변경하는 경우를 제외하고, 완벽하게 작동 MathJax의 출력물은 그 옆에 있습니다.

MathJax에서 이러한 변경 사항을 인식하고 그에 따라 작동하도록하려면 어떻게해야합니까? 고맙습니다.

출처

2017-12-14 Albêr

시도한 것을 샘플로 추가 할 수 있습니다. 누군가에게 당신에게 해결책을 건네 줄 것을 요청하는 것은 Stackoverflow에 적합하지 않습니다. –

@PeterKrautzberger 몇 가지 예제 코드를 추가했습니다. –

많은 시도를 한 후에 답변을 찾았습니다.

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

를 만들었습니다.

출처

2017-12-18 18:03:41

Angular4 라텍스 방정식

답변

관련 문제