如何在 Angular2 组件中使用 JavaScript 文件？答案

【问题标题】：How to use JavaScript file in Angular2 component?如何在 Angular2 组件中使用 JavaScript 文件？
【发布时间】：2017-03-19 02:20:27
【问题描述】：

我必须嵌入一个小部件，它在加载时执行。在普通的 html 页面中，我会放置脚本：

<script src="rectangleDrawing.js"></script>

然后我会将div 作为占位符：

<div name="rectangle></div>

现在的问题是我不能只将script 放入模板中，因为它将被删除。 rectangleDrawing.js 也没有将自身作为模块导出。

我该怎么做？

【问题讨论】：

标签： javascript angularjs angular typescript webpack

【解决方案1】：

将<script> 放在 index.html 页面中
将<div.. 标记放入组件模板中

可能该脚本会暴露一些您可以在组件内部使用的全局变量，这取决于内部是什么以及它是如何工作的......

【讨论】：

感谢您的回复。我只是在做更多的研究。我正在使用 webpack。我可以使用脚本加载器并将脚本仅加载到组件中吗？只是为了避免让它成为全局的并且只能被这个组件访问。

【解决方案2】：

这可能不是最优雅的选择，但它确实有效。只需将其放入您的组件中：

ngOnInit() {
    this.loadScript();
}

private loadScript(): void {
    const node = document.createElement('script');
    node.src = 'yourScript.js';
    node.type = 'text/javascript';
    node.async = true;
    node.charset = 'utf-8';
    document.getElementsByTagName('head')[0].appendChild(node);
}

【讨论】：