Question

我正在构建Angular 5应用，并且试图向其中一个组件添加小部件。

我尝试像在this question中的答案一样添加它，但是它有时无法加载，我不知道为什么。

窗口小部件已加载以下脚本：

<script src="https://example.com/widget/js/widgetLoader.js"
        type="text/javascript"
        charset="utf-8" 
        data-id="xxxxx" 
        data-target="WidgetPlaceHolder"
        data-displaymeta="off"
        data-css="https://example.com/widget/css/temp/widget.css"
        data-type="widget-type"
        data-lv="en"
        data-apikey="xxx-xxx">
</script>

我将其添加到我的组件中，如下所示：

public loadScript() {
    let widgetScripts = 'https://example.com/widget/js/widgetLoader.js';
    let node = document.createElement('script');
    node.src = widgetScripts ;
    node.type = 'text/javascript';
    node.async = false;
    node.charset = 'utf-8';
    node.setAttribute('data-id', this.information.id);
    node.setAttribute('data-target', 'WidgetPlaceHolder');
    node.setAttribute('data-displaymeta', 'off');
    node.setAttribute('data-css', 'https://example.com/widget/css/temp/widget.css');
    node.setAttribute('data-type', 'widget-type');
    node.setAttribute('data-lv', 'en');
    node.setAttribute('data-apikey', 'xxx-xxx');
    document.getElementsByTagName('head')[0].appendChild(node);
}

然后：

loadWidget: Promise<any>;

ngOnInit() {
    this.loadWidget = new Promise((resolve) => {
        this.loadScript();
        resolve(true);
    });
}

问题是，是否有适当的方法在Angular中添加脚本？是否有Angular API或库可以做到这一点？

Answer 1

如果您使用Angular CLI构建了项目，则在项目根目录下的angular.json文件中将有一个脚本属性，您必须在其中添加对该脚本的引用。

    "assets": [
      "src/favicon.ico",
      "src/assets"
    ],
    "styles": [
      "src/styles.css"
    ],
    "scripts": [ADD IT HERE]
  },

在Angular 5中添加小部件脚本的正确方法

1 个答案: