Angular2（Typescript） - 动态绑定的html不应用脚本格式

Question

此脚本位于我的index.html中：

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

如果我在component.html中写了一行html 静态，它会正确应用脚本中的格式。 （1）在图像中。

然而，一旦我让角度绑定它，图像中的（2）和（3），则不应用该脚本，结果是html呈现为普通html。我尝试通过[innerHTML]绑定它并设置#ID

如何使用动态字符串在（1）中获得漂亮的格式？

import { Component, ViewChild, ElementRef, OnInit } from '@angular/core'
import { Request } from "./Request";

@Component({
  selector: 'html-component',
  templateUrl: './html.component.html',
  styleUrls: ['./html.component.css'],
  providers: [Request]
})
export class HtmlComponent implements OnInit {  
  questionString = '';
  answerString = '';
  currentQuestion;
  type;
  @ViewChild('questionId') questionId: ElementRef;

我在这里设置了内部html的值：

this.request.postHtml("openLink",result)
      .then(response => {   
          this.questionId.nativeElement.innerHTML =
              response._body.replace(/{/g, '{{\'{\'}}');

      console.log(this.questionId.nativeElement.innerHTML);
      this.questionString = response._body.replace(/{/g, '{{\'{\'}}');

我没有真正的模板。它主要在一个大的HTML文件中。

HTML（再次）：

HTML输出：

我尝试在[innerHTML]绑定之前放置。它没有改变任何东西，因为我已经包含在index.html（这个html页面的父级）

Answer 1

我认为基本问题是MathJax在Angular可以构建模板和数据绑定属性之前处理页面。 Angular完成其工作后，您需要处理数学。基本上你需要使用MathJax.Hub来强制要求MathJax在需要时处理和渲染数学字符串（意味着在Angular完成后将它放在页面上）。

我会像你这样使用@ViewChild() questionId：

this.request.postHtml().then(response => {

   // capture the element that will hold the math
   let div = this.questionId.nativeElement;

   //populate the div with math input string. Try innerText before using innerHTML
   div.innerText = ...;

   //process the div's contents and render the math
   MathJax.Hub.Queue(["Typeset", MathJax.Hub, div]);
})

更多详情available here。你应该stop using cdn.mathjax.org

Answer 2

基本问题是我在其他答案中编写的内容（MathJax在 Angular完成渲染模板之前正在执行，因此要修复，您需要在渲染数学之前等待组件加载）。 / p>

这个答案与我的另一个答案完全不同。您可以使用指令来处理工作。将其附加到任何元素并使用数据绑定在该元素中显示数学。例如，如果指令具有选择器[mathText]，则只需将其绑定到包含原始字符串的组件属性：

<div [mathText]="questionString"></div>

在指令中，MathJax将解析文本并在<div>中呈现方程式。

import {Directive, ElementRef, Input, OnChanges} from '@angular/core';

@Directive({
    selector : '[mathText]',
})
export class MathTextDirective implements OnChanges {
    constructor(public elementRef: ElementRef) {
        this.hostEl = elementRef.nativeElement; //capture the HTML element host
    }

    //Used to bind data: eg: <div [mathText]="raw string">
    @Input('mathText') inputString:string;
    // host element
    private hostEl:HTMLElement;

    //have MathJax parse the host element and render the math
    render(){MathJax.Hub.Queue(['Typeset', MathJax.Hub, this.hostEl])}

    // called when the inputString changes.
    ngOnChanges(){
        //make the input string into the innerText of the host element
        this.hostEl.innerText = this.inputString;
        this.render();
    }
}

Live demo