时间戳

首页 > 解决方案 > 以角度动态加载javascript

javascript - 以角度动态加载javascript

问题描述

我有以下场景和问题要解决。任何帮助将不胜感激。

场景我有一个角度应用程序，它调用一个服务（web api）并取回内容。内容被添加到 html div 中。内容如下：

<script type="text/javascript" src="https://xxxx.com/ws/js/xxxxloader.js" id="theLoader"></script>
<script type="text/javascript">
// The code here look at the if the above script has been loaded properly by //checking the state of above script tag
</script>

我将返回的内容添加到 NgOnInit() 中组件的 HTML 中，如下所示。

ngOnInit(){
    this.apiService.getContent().subscribe(           
                        d => {
                  this.responseString = d.toString();                


                   var frag = document.createRange().createContextualFragment(this.responseString);
                   document.getElementById("theContainer").appendChild(frag);

                        }
                    );
                }

但是，它失败了，因为第一个脚本标签 (#theLoader) 从未正确加载。我认为这是因为我在 Dom 完成加载后注入了脚本标签。如果您能看到注入脚本的更好方法，您能否赐教。

提前致谢。

标签： javascriptangulardomangular6domcontentloaded

解决方案

ngAfterViewInit () {
    this.loadScript('path to your js');           
}

loadScript(url) {
    console.log('preparing to load...')
    let node = document.createElement('script');
    node.src = url;
    node.type = 'text/javascript';
    document.getElementsByTagName('head')[0].appendChild(node);
}

推荐阅读