如何使用Ionic2

我得到模板解析錯誤，同時整合MathJax到Ionic2請幫助我，如何使用Ionic2

的package.json整合MathJax

"dependencies": { 
    ..... 
    "mathjax": "^2.7.0" 
    },

home.ts

import mj from "mathjax";

home.html的

<ion-card-title> Name </ion-card-title> 
     <span> When $a \ne 0$, there are two solutions to \(ax^2 + bx + c = 0\) and they are 
$$x = {-b \pm \sqrtb^2-4ac \over 2a.}$$</span> 
     <button (click)= render()> Render Katex</button> 
     <script type="text/x-mathjax-config"> 
     MathJax.Hub.Config({ 
      tex2jax: 'inlineMath: [['$','$'], ['\\(','\\)']]} 
     }); 
     </script> 
     <script type="text/javascript" async src="../../../node_modules/mathjax/MathJax.js?config=TeX-MML-AM_CHTML"></script>

來源

2016-12-15 Ashutosh Patnaik

你是如何安裝它的？ –

https://www.npmjs.com/package/@types/mathjax

您需要安裝typescript聲明。嘗試

npm install @types/mathjax --save

退房this question

來源

2016-12-15 09:20:11

我'分型安裝DT〜mathjax --save --global' –

哪些IA你離子的版本？你可以分享package.json –

'@ angular/common「：」2.1.1「，」@ angular/compiler「：」2.1.1「，」@ angular/compiler-cli「：」2.1.1「，「@ angular/core」：「2.1.1」，「@ angular/forms」：「2.1.1」，「@ angular/http」：「2.1.1」，「@ angular /瀏覽器「：」2.1.1「，」@ angular/platform-browser-dynamic「：」2.1.1「，」@ angular/platform-server「：」2.1.1「，」@ ionic/storage「：「1.1.6」，「ion-angular」：「2.0.0-rc.3」，「ionic-native」：「2.2.3」，「ionicons」：「3.0.0」，「 jQuery的「：」3.1.1「，」lodash「：」^ 4.17.2「，」mathjax「：「^ 2.7.0」，「rxjs」：「5.0.0-beta.12」，「zone.js」：「0.6.26」' –

我一直在google搜索最後2天「離子3離線整合MathJax」。所有我發現，我必須使用指令來實現這一點。但是對於這樣一個有很多數學方程的應用來說，這種方法並不快。從here

下載MathJax脫機文件，提取和重命名與MathJax，並把整個文件夾中WWW /資產的離子應用的文件夾：所以我想出了另一種解決方案。
加入

<script type="text/x-mathjax-config"> MathJax.Hub.Config({ imageFont: null, extensions: ["tex2jax.js"], jax: ["input/TeX","output/HTML-CSS"], tex2jax: {inlineMath: [["$","$"],["\$","\$"]]} }); </script> <script type="text/javascript" async src="assets/MathJax/MathJax.js"> </script>
現在index.html文件的頭節要加載的數學方程式每一頁下面給出的代碼，只需粘貼下面的代碼。

ionViewDidEnter() { eval('MathJax.Hub.Queue(["Typeset", MathJax.Hub])'); }

通過這樣做，你會已經成功地將MathJax這三個步驟。

但問題是MathJax文件夾的大小是如此之大。只需擁有以下目錄和文件即可將尺寸減小到3mb

MathJax。JS
擴展
字體
- HTML，CSS
- TeX的
  - EOF
  - OTF
  - SVG
JAX
- 元件
- 輸入
  - 的TeX
- 輸出
  - HTML-CSS
  - 自動加載
  - config.js
  - 字體
    - TeX的
  - imageFonts.js
  - jax.js

來源

2017-07-26 19:39:42 zoha131

在你的index.html文件，添加以下腳本... `

<script type="text/x-mathjax-config"> 
    MathJax.Hub.Config({ 
    showProcessingMessages: false, 
    tex2jax: { inlineMath: [['$','$'],['\\(','\\)']] } 
    }); 
</script> 

<script type="text/javascript" async src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_HTMLorMML"> 
</script>

然後作出指示爲mathjax在app.module.ts如下

import {Directive, ElementRef, Input} from '@angular/core'; 
declare var MathJax: { 
    Hub: { 
    Queue: (param: Object[]) => void 
    }} 
      @Directive({selector: '[MathJax]'}) 
      export class MathJaxDirective { 
       @Input('MathJax') MathJaxInput: string = ""; 
       constructor(private el: ElementRef) { 
       } 
       ngOnChanges() { 
        this.el.nativeElement.innerHTML = this.MathJaxInput; 
        MathJax.Hub.Queue(["Typeset", MathJax.Hub, this.el.nativeElement]); 
       } 
      }

然後 import {MathJaxDirective} from "...使用它在你整個應用

一個條件，如果你有多個模塊，然後使一個普通的模塊像

import { NgModule } from "@angular/core"; 
import { MathJaxDirective } from "./directives/MathJax.directive";  
@NgModule({ 
     declarations: [MathJaxDirective], 
     exports: [MathJaxDirective] 
    }) 
    export class CommonModule { }

和所需模塊

現在你是好進口這個模塊去

只是在你的.html <div [Mathjax]="sometxt">{{ sometxt }}</div>

，並在您的.ts sometxt: string = "$$someLatex"

希望，這將幫助別人

來源

2018-01-26 12:26:08 Suryan

如何使用Ionic2

回答

相關問題