我尝试在我的离子2应用程序中使用MathJax。我尝试构建
时出现错误消息
E:\Users\Renaud\Applisionic\QCM>ionic cordova build android --prod --release
Running app-scripts build: --prod --iscordovaserve --externalIpRequired --nobrowser
[09:56:52] build prod started ...
[09:56:52] clean started ...
[09:56:52] clean finished in 4 ms
[09:56:52] copy started ...
[09:56:52] ngc started ...
Error: Template parse errors:
Can't bind to 'MathJax' since it isn't a known property of 'div'. ("
<ion-content>
<div MathJax [ERROR ->][MathJax]="formulae">{{formulae}}</div>
<button ion-button block color="secondary" (click)="goToR"): ng:///E:/Users/Renaud/Applisionic/QCM/src/pages/adversaire/adversaire.html@11:14
我的指令是在math-jax.ts中定义的:
import {Directive, ElementRef, Input, Component} from '@angular/core';
@Directive({
selector: '[MathJax]'
})
export class MathJaxDirective {
@Input('MathJax') MathJaxInput: string;
constructor(private el: ElementRef) {
}
ngOnChanges() {
console.log('>> ngOnChanges');
this.el.nativeElement.innerHTML = this.MathJaxInput;
console.log(this.MathJaxInput);
eval('MathJax.Hub.Queue(["Typeset",MathJax.Hub, this.el.nativeElement])');
}
}
我的HTML文件adversaire.html:
<ion-content>
<div MathJax [MathJax]="formulae">{{formulae}}</div>
</ion-content>
文件adversaire.ts:
import { Component } from '@angular/core';
@IonicPage({
name: "adversaire"
})
@Component({
selector: 'page-adversaire',
templateUrl: 'adversaire.html'
})
export class AdversairePage {
formulae : String ;
constructor() {
this.formulae="`sum_(i=1)^n i^3=((n(n+1))/2)^2`";
}
我的指令是app.module.ts中的delare:
import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { AppReno } from './app.component';
import { HomePage } from '../pages/home/home';
import { MathJaxDirective } from '../directives/math-jax/math-jax';
@NgModule({
declarations: [
AppReno,
HomePage,
MathJaxDirective,
],
imports: [
BrowserModule,
IonicModule.forRoot(AppReno),
],
bootstrap: [IonicApp],
entryComponents: [
AppReno,
HomePage,
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
]
})
export class AppModule {}