如何在Angular2组件中使用JavaScript文件

How to use JavaScript file in Angular2 component?

本文关键字：JavaScript 文件 组件 Angular2      更新时间：2023-09-26

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

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

然后我将div作为占位符:

<div name="rectangle></div>

现在的问题是，我不能只是把script到模板中，因为它将被删除。此外，rectangleDrawing.js不是作为一个模块出口。

我该怎么做?

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

这个脚本可能会暴露一些全局变量，你可以在你的组件中使用，这取决于里面是什么以及它是如何工作的…

这可能不是最优雅的选择，但它可以工作。把这个放到你的Component: 

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);
}
相关文章：