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

Question

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

Answer 1

参阅内部的脚本angular-cli.json （ angular.json使用角度时6+）文件。

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

然后添加typings.d.ts （如果它不存在，则在src创建此文件）

declare var variableName:any;

将其导入到您的文件中

import * as variable from 'variableName';

Answer 2

为了包括全球库，例如jquery.js文件从脚本阵列中angular-cli.json （ angular.json使用角度时6+）：

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

之后，如果 ng serve 已经启动，请重新启动。

Answer 3

在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>

它对我有用...

Answer 4

你可以

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

或者

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

Answer 5

我通过在tsconfig.json文件的“compilerOptions”中添加"allowJs": true解决了这个问题！

Answer 6

这听起来可能很愚蠢，但如果您觉得自己正确导出了 JavaScript 辅助函数 utils/javaScriptHelperFunction.js

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

如果您已完成上述答案中提到的检查，只需关闭并打开您的代码编辑器......在进入兔子洞之前先进行快速基本故障排除。

Answer 7

- 让我们假设我们的脚本文件custom.js如下所示：-

var utilObj = {
    dummyFunc: () => {
        console.log('Calling dummy function!');
    }
}

- 在angular.json文件的脚本数组中添加你的 javascript/script 文件。

"scripts": [
    "src/custom.js" 
 ],

应该是这样的：-

- 在typings.d.ts中添加以下代码片段。 如果此文件不存在，请在src文件夹中创建一个。

declare var utilObj:any;

保持您的变量名称类似于脚本文件的属性。 这里utilObj是属性名称。

- 现在，您可以直接在组件或 .ts 文件中使用此脚本/js 文件。

您现在不需要在组件文件或 .ts 文件中导入文件，因为我们已经在typings.d.ts文件中给出了脚本文件的类型定义。

例子： -

ngOnInit() {
  console.log('Starting Application!');
  utilObj.dummyFunc();
}

- 输出： -