如何在 Angular 中包含 JavaScript 脚本文件并从该脚本调用函数？

我有一个名为 abc.js的 JavaScript 文件，它有一个名为 xyz()的“ public”函数。我想在我的 Angular 项目中调用这个函数。我该怎么做？

280495 次浏览
小开

你也可以

import * as abc from './abc';
abc.xyz();

或者

import { xyz } from './abc';
xyz()
小开

为了包含一个全局库，例如 angular-cli.json脚本数组中的 jquery.js文件(使用角度6 + 时为 angular.json) :

"scripts": [
"../node_modules/jquery/dist/jquery.js"
]

此后，如果已经启动，则重新启动 ng 服务。

小开
最佳答案

当使用角6 + 时，请参考 angular-cli.json(angular.json)文件中的脚本。

"scripts": [
"../path"
];

然后添加 typings.d.ts(如果该文件不存在，则在 src中创建该文件)

declare var variableName:any;

将其导入到您的文件中，作为

import * as variable from 'variableName';
小开

在 Html中添加外部 js 文件。

<script src="./assets/vendors/myjs.js"></script>

这是 Myjs.js文件:

var myExtObject = (function() {


return {
func1: function() {
alert('function 1 called');
},
func2: function() {
alert('function 2 called');
}
}


})(myExtObject||{})




var webGlObject = (function() {
return {
init: function() {
alert('webGlObject initialized');
}
}
})(webGlObject||{})

然后在组件中声明它，如下所示

Demo 组件

declare var myExtObject: any;
declare var webGlObject: any;


constructor(){
webGlObject.init();
}


callFunction1() {
myExtObject.func1();
}


callFunction2() {
myExtObject.func2();
}

Demo.Component. html

<div>
<p>click below buttons for function call</p>
<button (click)="callFunction1()">Call Function 1</button>
<button (click)="callFunction2()">Call Function 2</button>
</div>

对我有用。

小开

我解决了这个问题，在 Tsconfig.json文件的“编译器选项”中添加了 "allowJs": true！

小开

这听起来可能有点傻，但是如果您觉得您正在正确地导出您的 JavaScript 助手函数 utils/javaScriptHelperFunction.js

export function javaScriptFunction() {
// DO HELPER FUNCTION STUFF
}

如果你已经完成了上述答案中提到的检查，只要 差不多和 打开你的代码编辑器... 开始快速的基本故障排除之前进入兔子洞。


提交答案