Question

我在将MathJax集成到Ionic2时遇到模板解析错误请帮我解决这个问题，

的package.json

 "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>

Answer 1

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

您需要安装打字稿声明。尝试

npm install @types/mathjax --save

结帐this question

Answer 2

我一直在谷歌搜索＆＃34;将MathJax集成到离线3离线＆＃34;过去2天所有我发现，我必须使用指令来实现这一目标。但是对于这样一个有很多数学方程的应用来说，这种方法并不快。所以我提出了另一个解决方案：

从here下载MathJax离线文件，使用 MathJax 解压缩并重命名，并将整个文件夹放在离子的 www / assets 文件夹中应用
在index.html文件
的head部分添加下面给出的代码
<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>
现在，对于要加载数学方程式的每个页面，只需粘贴下面的代码即可。

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

通过执行这三个步骤，您将成功集成MathJax。

但问题是MathJax文件夹的大小是如此之大。只需拥有以下目录和文件

MathJax.js
扩展
字体
- HTML-CSS
- 的TeX
  - EOF
  - OTF
  - SVG
JAX
- 元素
- 输入
  - 的TeX
- 输出
  - HTML-CSS
  - 自动加载
  - config.js
  - 字体
    - 的TeX
  - imageFonts.js
  - jax.js

Answer 3

在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制作如下指令

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

然后在app.module.ts中 import {MathJaxDirective} from "...在整个应用中使用它

如果你有一个条件，你有一个像

这样的commonModule

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"

希望，这会帮助某人

如何将MathJax与Ionic2集成

3 个答案: