Ionic 2和Mathjax:无法绑定到'MathJax',因为它不是'div'的已知属性。 (“

时间:2017-07-19 08:45:52

标签: ionic-framework ionic2 angular2-directives mathjax

我尝试在我的离子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 {}

0 个答案:

没有答案