我有一个 JavaScript 文件abc.js，它有一个名为xyz(). 我想在我的 Angular 项目中调用该函数。我怎么做？
如何在 Angular 中包含 JavaScript 脚本文件并从该脚本调用函数？
IT技术
javascript
angular
2021-01-26 21:23:33
5个回答
请参阅angular-cli.json（angular.json使用 angular 6+ 时）文件中的脚本。
"scripts": [
"../path"
];
然后添加typings.d.ts（src如果该文件不存在，则创建该文件）
declare var variableName:any;
将其导入到您的文件中
import * as variable from 'variableName';
为了包含一个全局库，例如jquery.js脚本数组中的文件angular-cli.json（angular.json当使用 angular 6+ 时）：
"scripts": [
"../node_modules/jquery/dist/jquery.js"
]
之后，如果 ng serve 已经启动，请重新启动。
在index.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||{})
然后声明它在如下组件中
演示.component.ts
declare var myExtObject: any;
declare var webGlObject: any;
constructor(){
webGlObject.init();
}
callFunction1() {
myExtObject.func1();
}
callFunction2() {
myExtObject.func2();
}
演示.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>
它对我有用...
你可以
import * as abc from './abc';
abc.xyz();
或者
import { xyz } from './abc';
xyz()
我通过"allowJs": true在tsconfig.json文件中的“compilerOptions”中添加解决了这个问题！