如何在Angular 4中包含外部js文件并从angular到js调用函数

Question

假设我有一个名为abc.js具有功能的文件xyz().我想在我的Angular 4项目中调用该函数.我该怎么办？

Answer 1

请参阅angular-cli.json文件中的脚本.

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

然后加入 typings.d.ts

declare var variableName:any;

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

import * as variable from 'variableName';

Answer 2

为了包含一个全局库,例如来自angular-cli.json的脚本数组中的jquery.js文件:

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

在此之后,如果已经启动,则重新启动ng.

Answer 3

你也可以

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

要么

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

Answer 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

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

它为我工作...

Answer 5

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