javascript - 使 Angular 2 组件下载并运行脚本

Question

我正在尝试使用 MathJax在我的 Angular 2 应用程序中显示方程式。实际上，我的应用程序只有一小部分需要此功能，因此我不希望所有用户都必须下载所需的 3-400kb。

我最初的想法是在我的组件中导入“mathjax”，这样只有在创建组件时才会加载库。然而，我学会了from my earlier question MathJax 不能很好地与其他人一起玩，因为它使用自己的自定义模块加载器。

我当前的设置从我的 index.html 加载了 script 但这意味着当只有一小部分用户需要时 每个人 都会下载它这个组件

<script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=AM_SVG"></script>

在 Angular 2 中是否有一种干净的方法让我的组件在 ngOnInit() Hook 中下载脚本并在它进入 DOM 后执行回调？诸如(伪代码)之类的东西:

ngOnInit(){
    //download script, add to DOM      
    fetch('https://...MathJax.js').then(addToDom).then(this.onMathJaxLoaded);
}
onMathJaxLoaded(){
  // Run math renderer
  MathJax.Hub.Queue("Typeset",...);
}

Answer 1

我还没有尝试过，但我认为这是可能的:

ngOnInit(){
    //download script, add to DOM      
    var script = document.createElement('script');
    document.body.appendChild(script)
    script.onload = this.onMathJaxLoaded.bind(this);
    script.src = 'https://...MathJax.js';
}
onMathJaxLoaded(){
  // Run math renderer
  MathJax.Hub.Queue("Typeset",...);
}

这是一个 fiddle ，其中包含一个示例，说明它如何在纯 JavaScript 中工作； https://jsfiddle.net/5qu5h7bc/