angular4如何在外部js中调用函数

Question

我有一个jscript显示控制台的日志：

x.js包含

function open() {
    console.log('this a function');
}

在我的应用程序的index.html中

<script src="x.js"></script>

在我的组件中

declare var xJS : any;;

@Component({
   selector: 'employerfile',
   templateUrl: './employerfile.component.html'
})

export class EmployerFileComponent
    .....
    openURL() {
       xJS.open();  
    }
}

在HTML中

<a (click)="openURL()"> click </a>

当我执行此代码时，我得到一个异常@

原始异常：未定义xJS

如何调用此外部函数？

Answer 1

像这样导入文件<script src="x.js"></script>将不起作用。

您必须以下列方式导入它：

import * as xJS from './x.js';

如果它不起作用，另一种方法是使用System.import ：

declare var System: any; 

System.import('./x.js')
    .then(xJS => {
        xJS.open();
    });

您可以查看以下SO帖子 。

Answer 2

您必须声明要在角度组件中使用的函数的名称，如下所示 -

declare var open: any;

这基本上告诉编译器open存在于某处，然后在js文件中找到它。

另外，要在组件中使用上述方法，您必须使用以下语法 -

anyCustomMethodName/anyLifeCycleMethod() {
    new open();
}

Answer 3

你应该先导入它：

import * as xJS from 'xJS';

Answer 4

如果您的x.js文件不在本地计算机上或托管在CDN上，或者它是第三方库，则您无法以上述方式导入它。 甚至不推荐使用System.import 。

您可以将js文件添加到index.html中，并使用window global对象调用其函数，如前所述。