Angular5中Observable绑定Div内MathJax无法渲染TeX问题

这个问题的核心原因很明确：MathJax默认只在页面初始加载时扫描并渲染一次DOM，而你的*ngFor内容是通过AngularFire异步获取数据后才动态生成的——这些新添加的DOM元素根本没被MathJax的初始扫描覆盖，所以TeX代码只会显示源码。

下面是两种可靠的解决方案，适配不同的MathJax版本和场景：

方案一：利用Angular视图钩子触发重新排版（推荐） #

通过AfterViewChecked钩子监听视图变化，在异步数据加载完成、DOM更新后手动调用MathJax的排版API。为了避免无限循环，我们加一个标志位控制触发时机：

修改app.component.ts #

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

// 声明全局MathJax变量，避免TypeScript类型报错
declare var MathJax: any;

@Component({
  selector: 'app-bible',
  templateUrl: './bible.component.html',
  styleUrls: ['./bible.component.scss']
})
export class BibleComponent implements OnInit, AfterViewChecked {
  bibleObservable: Observable<any[]>;
  private hasRenderedMath = false; // 标记是否已触发过MathJax排版

  constructor(
    private db: AngularFireDatabase,
    private cdr: ChangeDetectorRef // 用于强制触发Angular视图检测
  ) { }

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

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

  ngAfterViewChecked() {
    // 仅在第一次数据加载完成且未渲染过MathJax时执行
    if (!this.hasRenderedMath) {
      // 先强制Angular完成DOM更新，确保*ngFor的内容已经渲染到页面
      this.cdr.detectChanges();
      
      // 根据你的MathJax版本调用对应API
      if (MathJax.Hub) {
        // MathJax 2.x版本
        MathJax.Hub.Queue(['Typeset', MathJax.Hub]);
      } else {
        // MathJax 3.x版本
        MathJax.typeset();
      }

      this.hasRenderedMath = true;
    }
  }
}

方案二：在数据订阅回调中触发排版（适合实时更新场景） #

如果你的数据是实时同步的（比如Firebase实时数据库），每次数据变化都需要重新渲染TeX，可以直接在订阅的回调里触发MathJax排版：

修改app.component.ts的ngOnInit方法 #

ngOnInit() {
  this.getRule('/theorems').subscribe(theorems => {
    this.bibleObservable = Observable.of(theorems);
    
    // 用setTimeout确保Angular已经完成DOM更新
    setTimeout(() => {
      if (MathJax.Hub) {
        MathJax.Hub.Queue(['Typeset', MathJax.Hub]);
      } else {
        MathJax.typeset();
      }
    }, 0);
  });
}

额外注意事项 #

1. MathJax配置检查：确保你的MathJax配置正确识别TeX语法，比如在index.html中加载MathJax时的配置：

   <!-- MathJax 2.x示例 -->
   <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: [['\\(', '\\)']],
         displayMath: [['\\[', '\\]']],
         processEscapes: true
       }
     });
   </script>
   

2. 避免重复排版：如果用方案一，标志位hasRenderedMath能有效防止ngAfterViewChecked钩子无限触发；如果是实时数据场景，方案二的订阅回调会自动在每次数据更新时触发排版。

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