Angular 5结合Firebase时MathJax动态渲染问题求助

嘿，作为Angular新手遇到这个问题太正常啦！别担心，咱们一步步来搞定动态内容的MathJax渲染，包括Firebase数据实时变更的情况～

核心思路 #

MathJax默认只会在页面初始加载时渲染一次静态内容，而Firebase的数据是异步获取的，Angular更新DOM后MathJax并不知道，所以我们需要在Angular完成DOM更新后手动触发MathJax的重新渲染。

具体步骤 #

1. 声明MathJax全局变量（避免TypeScript报错） #

在你的组件.ts文件顶部、import语句下面添加这行代码，告诉TypeScript全局存在MathJax对象：

declare var MathJax: any;

2. 编写通用的MathJax渲染方法 #

在组件里写一个复用的方法，用来触发MathJax重新排版：

private renderMathJax(): void {
  // 先判断MathJax是否已加载完成
  if (typeof MathJax !== 'undefined') {
    // 调用MathJax v2版本的排版方法（你当前配置的是v2）
    MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
  }
}

3. 在Firebase数据更新后触发渲染 #

当你从Firebase获取数据（包括实时变更）时，在数据赋值给组件变量后，需要等Angular更新完DOM再调用渲染方法。这里用setTimeout(fn, 0)来确保DOM已更新：

假设你的组件代码是这样的（用angularfire2操作Firebase）：

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

declare var MathJax: any;

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit, AfterViewInit {
  firebaseData: any[]; // 存储从Firebase获取的数据

  constructor(private db: AngularFireDatabase) { }

  ngOnInit(): void {
    // 订阅Firebase数据的实时变化
    this.db.list('your-firebase-data-path').valueChanges()
      .subscribe((newData) => {
        this.firebaseData = newData;
        // 等Angular更新DOM后触发MathJax渲染
        setTimeout(() => {
          this.renderMathJax();
        }, 0);
      });
  }

  ngAfterViewInit(): void {
    // 页面初始加载时，渲染静态内容
    this.renderMathJax();
  }

  private renderMathJax(): void {
    if (typeof MathJax !== 'undefined') {
      MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
    }
  }
}

4. 确保MathJax脚本正确引入 #

检查你的index.html头部，MathJax的脚本要在Angular脚本之前加载，比如：

<head>
  <!-- 其他meta标签 -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-MML-AM_CHTML"></script>
  <script type="text/x-mathjax-config">
    MathJax.Hub.Config({
      tex2jax: {
        inlineMath: [['$','$'], ['\\(','\\)']],
        processEscapes: true
      }
    });
  </script>
  <!-- Angular的脚本 -->
</head>

为什么用setTimeout？ #

Angular的变更检测是异步的，当你在subscribe里给firebaseData赋值后，Angular不会立刻更新DOM，而是等到下一个变更检测周期。setTimeout(() => {}, 0)可以让渲染方法在DOM完全更新后执行，这样MathJax就能找到所有新的公式元素啦～

额外提示 #

如果你的数据量很大，全局渲染可能有点慢，后期可以考虑只渲染变化的DOM元素，但作为新手，先实现全局渲染就足够啦！

内容的提问来源于stack exchange，提问作者user1149620