Typescript 从 Angular 组件动态加载外部 javascript 文件

发布于05月31日

我正在使用Angular 4和CLI创建Angular应用程序.我正在try 将SkyScanner搜索小部件添加到我的一个组件中.

部分实现需要添加新的外部脚本:

<script src="https://widgets.skyscanner.net/widget-server/js/loader.js" async></script>

我不确定引用此文件的正确方式.如果我将脚本添加到索引中.html文件，除非执行完整页面刷新，否则小部件不会加载.我假设脚本试图在加载时操作DOM，而脚本运行时元素不存在.

只有在加载包含Skyscanner小部件的组件时，才加载脚本的正确方法是什么？

推荐答案

try 在组件加载时加载外部JavaScript，如下所示:

loadAPI: Promise<any>;

constructor() {        
    this.loadAPI = new Promise((resolve) => {
        this.loadScript();
        resolve(true);
    });
}

public loadScript() {        
    var isFound = false;
    var scripts = document.getElementsByTagName("script")
    for (var i = 0; i < scripts.length; ++i) {
        if (scripts[i].getAttribute('src') != null && scripts[i].getAttribute('src').includes("loader")) {
            isFound = true;
        }
    }

    if (!isFound) {
        var dynamicScripts = ["https://widgets.skyscanner.net/widget-server/js/loader.js"];

        for (var i = 0; i < dynamicScripts.length; i++) {
            let node = document.createElement('script');
            node.src = dynamicScripts [i];
            node.type = 'text/javascript';
            node.async = false;
            node.charset = 'utf-8';
            document.getElementsByTagName('head')[0].appendChild(node);
        }

    }
}