2016-10-11 8 views
0

私はangular2アプリにmathmlタグを追加しようとしていません。 私の数学mlのコードは、私がMAthmlタグはAngular2でエラーを返します

<script type="text/x-mathjax-config"> 
    MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}}); 
</script> 
<script type="text/javascript" async 
    src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_CHTML"> 
</script> 

Angular2がエラーに

zone.js:355 Unhandled Promise rejection: Template parse errors: 
':math:mn' is not a known element: 
1. If ':math:mn' is an Angular component, then verify that it is part of this module. 
2. If ':math:mn' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. (" 

マイapp.modules.tsを与える設定でMathjaxを使用しています

<math xmlns="http://www.w3.org/1998/Math/MathML"> 
    <mstyle displaystyle="true"> 
    <mfrac> 
     <mrow> 
     <mn>1</mn> 
     </mrow> 
     <mrow> 
     <mn>2</mn> 
     </mrow> 
    </mfrac> 
    </mstyle> 
</math> 

であること

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule ,CUSTOM_ELEMENTS_SCHEMA} from '@angular/core'; 
import { FormsModule } from '@angular/forms'; 
import { HttpModule } from '@angular/http'; 
import { AppComponent } from './app.component'; 
@NgModule({ 
    declarations: [ 
    AppComponent 
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule 
    ], 
    providers: [], 
    schemas: [CUSTOM_ELEMENTS_SCHEMA], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

ですPlzの助け、私はcou問題を理解しないでください。

答えて

0

作成した後にデータを追加しても機能するはずです。

import { Component, Input, OnInit, NgModule } from '@angular/core'; 


@Component({ 
    selector: 'mathjax-display', 
    providers: [], 
    template: ` 
    <p>testing mathjax</p> 
    <div id="append"></div> 
    ` 
}) 
export class MathjaxDisplayComponent { 

    constructor(){ 

    } 
    ngOnInit(){ 
    document.getElementById("append").innerHTML = `<math xmlns="http://www.w3.org/1998/Math/MathML" display="block"> 
     <semantics> 
      <mrow> 
      <mn>3</mn> 
      <mo stretchy="false">/</mo> 
      <mn>3</mn> 
      <mo stretchy="false">⋅</mo> 
      <mn>33</mn> 
      </mrow> 
      <annotation encoding="StarMath 5.0">3/3 cdot 33 </annotation> 
     </semantics> 
     </math>`; 
    } 
} 
関連する問題