Question

我正在尝试将mathml标签添加到angular2 app中。我的数学ml代码是

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

我正在使用Mathjax和config

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

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的帮助，我无法弄清楚问题。

Answer 1

如果您在创建数据后附加数据，它应该可以正常工作。

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>`;
  }
}

MAthml标记在Angular2中给出错误

1 个答案: