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

Question

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

我最初的想法是import "mathjax"在我的组件中,因此只有在创建组件时才会加载库.但是,我从我之前的问题中了解到MathJax与其他人不能很好地兼容,因为它使用自己的自定义模块加载器.

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

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

是否有一种干净的方法Angular 2让我的组件在ngOnInit()钩子中下载脚本并在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",...);
}

这是一个小提琴,其中包含一个如何在纯JavaScript中工作的示例; https://jsfiddle.net/5qu5h7bc/