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

in 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 post。

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 全局对象调用其功能。

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

4 个答案: