带有 Firebase 数据的 Angular5 组件中的 MathJax答案

【问题标题】：MathJax in Angular5 Component with Firebase Data带有 Firebase 数据的 Angular5 组件中的 MathJax
【发布时间】：2018-07-06 21:35:33
【问题描述】：

我正在尝试更新从 Firebase 提取的数据，以便它在页面上显示方程式，而不是表示 Latex 语法的随机符号。我可以通过脚本标记将 MathJax 包含在我的项目中，然后使用它正确显示带有数学符号的段落，但我无法在我的项目中的其他组件中使用它。有没有更好的方法来 npm install 我需要的依赖项以及如何获取已经正确拉到页面以使用 MathJax 更新以具有正确格式的 Firebase 数据？

我的 index.html 头标签如下：

<head>
  <meta charset="utf-8">
  <title>Testing</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <script src="https://cdn.ckeditor.com/4.8.0/standard/ckeditor.js"></script>

  <script type="text/x-mathjax-config">
        MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}})
  </script>
  <script type="text/javascript" async
          src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-MML-AM_CHTML">
  </script>

</head>

我的component.html如下：

<div class="topnav">
  <input type="text" placeholder="Search..">
<div class="theoremsContainer">
  <ul>
    <div *ngFor="let theorem of bibleObservable | async">
      <ngb-alert type="info" [dismissible]="false">
        <h1>{{theorem.rule}}: {{theorem.name}}</h1>
        <p>{{theorem.eq}}</p>
      </ngb-alert>
    </div>
  </ul>
</div>
</div>

而我的component.ts如下：

import { Component, OnInit } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';
import { Observable } from 'rxjs/Observable';

@Component({
  selector: 'app-bible',
  templateUrl: './bible.component.html',
  styleUrls: ['./bible.component.scss']
})
export class BibleComponent implements OnInit {

  bibleObservable: Observable<any[]>;

  constructor(private db: AngularFireDatabase) { }

  ngOnInit() {
    this.bibleObservable = this.getRule('/theorems');
  }

  getRule(listPath): Observable<any[]> {
    return this.db.list(listPath).valueChanges();
  }

}

【问题讨论】：

标签： angular typescript firebase angular5 mathjax

【解决方案1】：

我不熟悉 MathJax 库本身，但听起来您需要它在模板中执行，所以也许是自定义指令？ https://angular.io/guide/attribute-directives

【讨论】：

我如何允许 MathJax 与嵌套在 ngFor 循环 div 中的元素交谈？我能够使它在 div 之外工作。是不是和我从 Firebase 拉数据的脸有关系？