How to get Mathjax working with Angular2?

问题:

Has anyone gotten Mathjax working with Angular2 ?

Plunkr example created :- http://plnkr.co/edit/FLduwmtHfkCN5XPfzMsA?p=preview

From some Angular1 examples I saw it looks like a directive is needed to call MathJax.Hub.Queue, but I suspect it will take me quite a while to get the Angular 2 syntax right, so I wondered if anyone has already done it ?

e.g the following is an Angular 1 example. https://github.com/ColCarroll/ngMathJax/blob/master/ng-mathjax.js

And the mathjax syntax is here :- https://docs.mathjax.org/en/v1.1-latest/typeset.html

Trying to do something similar in Angular2.

UPDATE - the following works, thanks to Thierry.

Component:-

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++;     }  } 

Directive:-

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

Still not sure why I need to queue the re-render in both places.

回答1:

I would implement this way with an input to get the specified expression:

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

And use this way:

See this plunkr: http://plnkr.co/edit/qBRAIxR27zK3bpo6QipY?p=preview.

回答2:

Based on this question, I started the development of an open source project to typeset TeX math expressions with Angular. The project is on https://github.com/garciparedes/ng-katex.

You can install the module with:

npm install ng-katex --save 

To add the module to your proyect add the KatexModule to import's field of your parent module:

import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app/app.component';  import { KatexModule } from 'ng-katex';  @NgModule({   imports: [BrowserModule, KatexModule],   declarations: [AppComponent],   bootstrap: [AppComponent] })  class AppModule {}  platformBrowserDynamic().bootstrapModule(AppModule); 

And then you can use it as follows:

import { Component } from '@angular/core';  @Component({   selector: 'my-app',   template: `` }) export class AppComponent {   equation: string = ''\sum_{i=1}^nx_i''; } 

回答3:

Used Mathjax in my project in Angular 2 as follows:

setTimeout(function () { MathJax.Hub.Queue(["Typeset", MathJax.Hub]);}, 5);

as the queue runs asynchronously, the setTimeout ensures the math rendering process happens after a certain point of time.

文章来源: How to get Mathjax working with Angular2?