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

【问题标题】：angular4 how to call a function in a external jsangular4如何在外部js中调用函数
【发布时间】：2017-11-21 05:51:23
【问题描述】：

我有一个向控制台显示日志的 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 未定义

如何调用这个外部函数？

【问题讨论】：

标签： javascript angular function external

【解决方案1】：

如果您的 x.js 文件不在您的本地机器上或托管在 CDN 上，或者它是第三方库，那么您无法通过上述方式导入它。 甚至 System.import 已被弃用。

您可以将您的 js 文件添加到 index.html 中，并像之前一样使用 window 全局对象调用其函数。

【讨论】：

【解决方案2】：

您必须声明要在 Angular 组件中使用的函数的名称，as-

declare var open: any;

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

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

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

【讨论】：

如果要存储 open() 函数的返回值怎么办？
当我尝试你的答案时，我得到“修饰符不能出现在这里”错误。
对我有用的是我把 let open: any;然后忽略 lintrule 放置 const ，而不是 let。保持不变。没有“声明”这个词。

【解决方案3】：

像 <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。

【讨论】：

我有这个错误 error_handler.js:50 EXCEPTION: Uncaught (in promise): TypeError: xJS.open is not a function
你能把你的外部文件做成一个模块并导出你的函数吗：export default function open(){ .... }
我也有同样的问题，但不同的是我包含的 js 是在网站中而不是在本地 https://chggtt.gt/Critgtek/cfr.cerfritek.js 所以有什么解决方案吗？
@GhizlaneLotfi 我从来没有遇到过外部链接的问题。也许这篇文章可以帮助你stackoverflow.com/q/34607252/2765346祝你好运:)

【解决方案4】：

你应该首先像这样导入它：

import * as xJS from 'xJS';

【讨论】：

我在 C:/....app.component.ts (15,28) 中有这个编译错误 ERROR: File 'C:/....js/x.js' is not一个模块。