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();
}