एंगुलर 2 के साथ काम कर रहे मथजैक्स को कैसे प्राप्त करें?

Question

क्या किसी ने एंगुलर 2 के साथ काम कर रहे मथजैक्स को प्राप्त किया है?

Plunkr उदाहरण बनाया: - http://plnkr.co/edit/FLduwmtHfkCN5XPfzMsA?p=preview

कुछ Angular1 उदाहरण मैं ऐसा लगता है कि एक निर्देश MathJax.Hub.Queue कॉल करने के लिए की जरूरत है देखा से, लेकिन मुझे लगता है कि यह मेरे लिए काफी कुछ समय लग कोणीय 2 प्राप्त करने के लिए होगा सिंटैक्स सही, तो मुझे आश्चर्य हुआ कि अगर कोई इसे पहले ही कर चुका है?

उदाहरण के लिए एक कोणीय 1 उदाहरण है। https://github.com/ColCarroll/ngMathJax/blob/master/ng-mathjax.js

और mathjax वाक्य रचना यहाँ है: - https://docs.mathjax.org/en/v1.1-latest/typeset.html

Angular2 में इसी तरह कुछ करने के लिए कोशिश कर रहा है।

अद्यतन - निम्नलिखित कार्य, थिएरी के लिए धन्यवाद।

घटक: -

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

अभी तक सुनिश्चित नहीं क्यों मुझे क़तार में दोनों स्थानों पर फिर से प्रस्तुत करना की जरूरत है।

Answer 1

मैं निर्दिष्ट अभिव्यक्ति पाने के लिए एक इनपुट के साथ इस तरह से लागू करना होगा:

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

और का उपयोग इस तरह से: http://plnkr.co/edit/qBRAIxR27zK3bpo6QipY?p=preview:

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

इस plunkr देखें।

Answer 2

इस प्रश्न के आधार पर, मैंने कोणीय के साथ टीएक्स गणित अभिव्यक्तियों को टाइप करने के लिए एक ओपन सोर्स प्रोजेक्ट का विकास शुरू किया। परियोजना https://github.com/garciparedes/ng-katex पर है।

आप के साथ मॉड्यूल स्थापित कर सकते हैं:

npm install ng-katex --save 

को जोड़ने के लिए अपने proyect के लिए मॉड्यूल अपने माता पिता के मॉड्यूल के KatexModuleimport करने के क्षेत्र को जोड़ने:

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

और फिर आप उपयोग कर सकते हैं यह निम्नानुसार है:

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'my-app', 
    template: `<ng-katex [equation]="equation">` 
}) 
export class AppComponent { 
    equation: string = ''\sum_{i=1}^nx_i''; 
} 

Answer 3

मेरी परियोजना में प्रयुक्त मैथजैक्स I एन कोणीय 2 निम्नानुसार है:

सेटटाइमआउट (फ़ंक्शन() {MathJax.Hub.Queue (["टाइपसेट", MathJax.Hub]);}, 5);

चूंकि कतार असीमित रूप से चलती है, सेटटाइमआउट सुनिश्चित करता है कि गणित प्रतिपादन प्रक्रिया निश्चित समय के बाद होती है।