从 Angular 组件动态加载外部 javascript 文件 [英] Dynamically load external javascript file from Angular component

问题描述

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

I am creating an Angular application using Angular 4 and the CLI. I am trying to add the SkyScanner search widget into one of my components.

Skyscanner 小部件示例

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

Part of the implementation requires the addition of a new external script:

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

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

I am not sure of the correct way to reference this file. If I add the script into my index.html file, the widget doesn't load unless a full page refresh is performed. I assume the script tries to manipulate the DOM on load and the elements don't exist when the script runs.

仅在加载包含 Skyscanner 小部件的组件时加载脚本的正确方法是什么?

What is the correct way to load the script only when the component containing the Skyscanner widget is loaded?

推荐答案

尝试在组件加载时加载外部 JavaScript 如下:

Try to load external JavaScript on component load as below :

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

    }
}

这篇关于从 Angular 组件动态加载外部 javascript 文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！