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

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

请参考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||{})

然后声明它在如下组件中

demo.component.ts

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>

它为我工作...

你可以

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

要么

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