以 angular 动态加载 JavaScript

Question

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

场景 我有一个角度应用程序，它调用服务(web api(并获取内容。内容将添加到 htmldiv 中。内容如下：

<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 完成加载后注入脚本标签。 如果你能看到更好的注入脚本的方法，你能启发我吗？

提前谢谢。

Answer 1

您可以通过创建动态脚本标记来动态注入 JS URL

ngOnInit(){
function loadScripts(url: string){
var el = document.createElement('script');
el.onload = function(script){
console.log(script + ' loaded!');
// you can call the JS Function
};
el.src = url;
document.getElementsByTagName('body')[0].append(el);
}
</script>

Answer 2

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);
}

Answer 3

试试这个：

ngOnInit(){
this.addScripts("https://xxxx.com/ws/js/xxxxloader.js", 'text/javascript');
this.addScripts("https://xxxx.com/js/mail.js", 'text/javascript');
}
addScripts(src, type): void{
var script = document.createElement('script');
script.src = src;
script.type = type;
document.querySelector('body').appendChild(script);
}