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

【问题标题】：How do I include a JavaScript script file in Angular and call a function from that script?如何在 Angular 中包含 JavaScript 脚本文件并从该脚本调用函数？
【发布时间】：2017-12-02 16:41:28
【问题描述】：

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

【问题讨论】：

标签： javascript angular

【解决方案1】：

你可以

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

或

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

【讨论】：

当文件托管在某个地方但不在本地存储库中时，我应该怎么做？
你发现了吗？
两种方法都出现错误。好吧，我的项目中有一个 .js 文件，但是当我通过第一种方法导入时，它在编译时出现错误，并且当我使用第二种方法时找不到任何模块。而我只是使用光滑的滑块。

【解决方案2】：

为了包含一个全局库，例如 angular-cli.json 的脚本数组中的 jquery.js 文件（使用 Angular 6+ 时为 angular.json）：

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

在此之后，如果 ng serve 已经启动，则重新启动它。

【讨论】：

如何在打字稿文件上导入？
导入ts文件使用-declare var $: any;
angular-cli.json 文件已在 Angular 6+ 版本中重命名/替换为 angular.json。
要么这在 2021 年不起作用，要么缺少一个步骤
将文件添加到数组后还有什么？ @alansiqueira27 好点

【解决方案3】：

请参阅angular-cli.json（使用 Angular 6+ 时为angular.json）文件中的脚本。

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

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

declare var variableName:any;

将其导入到您的文件中

import * as variable from 'variableName';

【讨论】：

我在脚本中添加了路径作为“脚本”：[“./assets/common_header_sidebar.js”];然后在 typing.d.ts 我写了 declare var commonHeader:any;然后在我的 ts 文件中我写了 import * as commonHeaderModule from 'commonHeader';但得到“找不到模块'commonHeader'。”错误
我问这个可能听起来很傻。但是路径中的文件名（在 angular-cli.json 中声明）和在 typing.d.ts 文件中声明对象的名称是如何相关的。因为我是从声明对象的名称而不是文件导入的
你能不能创建一个plunker来复制
完成了集成，只是我必须在我使用它的 ts 文件中声明该函数，并且不需要导入。非常感谢。
@Aravind 如果我的 Angular 4 项目中没有 typing.d.ts 文件怎么办？

【解决方案4】：

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

它对我有用...

【讨论】：

非常详尽的例子，谢谢，它在角度 6 上对我有用。其他答案都没有。
Fwiw, here are some explanations of what declare does -- 本质上是“declare 用于告诉 TypeScript 该变量已在别处创建”（来自this answer）。
我认为 index.html 文件在设计上是空的，我认为您应该保持这种状态。 ng serve 应该处理所有的 javascript 文件。

【解决方案5】：

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

【讨论】：