在angular 5组件中调用外部js文件的函数

Posted 2023-03-13

【中文标题】在angular 5组件中调用外部js文件的函数

【英文标题】：Call a function of external js file in angular 5 component

【发布时间】：2018-12-21 20:11:46

【问题描述】：

在 index.html 下我已经定义了一个外部 js 文件，例如<script data-siteid="XXXXXX" src="https://api.cartstack.com/js/customer-tracking/website.com_c7ee604471301b0bd028e8f19a535557.js" type="text/javascript"> </script>

我必须从一个组件中调用一个名为 cartstack_updatecart() 的函数。 （该功能是从上面的链接生成的）。该怎么做？

【参考方案1】：

在您的组件中执行以下步骤：-

1) First add a reference of your external JS file for importing it to the component. 
   Import * as abcJS from '/YourExternalJS.js';

2) Now declare a "var" of the same name that your function has inside external JS.
   declare var cartstack_updatecart: any;

3) ngOninit()
 cartstack_updatecart();
 

4) Do remember that your JQuery should be loaded first than your external JS file.

我已经在 ngoninit 生命周期钩子上调用了该函数。 另外，与其在 Index.html 中声明外部 JS 文件，我更建议您在脚本数组的 angular-cli.json 文件中声明它。 一切顺利。

【讨论】：

@Dipankar Naskar 您有解决方案还是仍然面临问题？请告诉我，我可以更详细地分享代码。

是的，我已经尝试过你的建议。它正在工作。谢谢大佬。

对我来说只是快速说明它没有第一步就可以工作。这只是给了我错误'../../yourExternalJS.js'不是一个模块（它工作但错误在bash中).. 并且还需要在 angular-cli.json 中导入。所以在我的情况下，跳过第一步并添加另一个步骤，即在 angular-cli.json 脚本中添加脚本..

是的，可以通过将脚本添加到 angular-cli.json 或直接将其引用删除到 Index.html 来包含脚本。我还想在这里通知，在 Angular 6 中，我们没有 angular-cli.json。 Angular 6 以后的 CLI 项目将使用 angular.json 而不是 .angular-cli.json 进行构建和项目配置。

嗨@AbhishekSharma，在我的例子中，JS文件部署在另一台服务器上。我怎样才能实现同样的目标？