如何将Angular4 typescript类方法作为回调传递给Javascript函数答案

【问题标题】：How to pass Angular4 typescript class method as callback to a Javascript function如何将Angular4 typescript类方法作为回调传递给Javascript函数
【发布时间】：2017-07-28 21:11:59
【问题描述】：

我有一个使用外部 JavaScript 文件的 angular 4 服务，我需要传递一个函数作为 JavaScript 函数之一的参数，例如 JavascriptAPI.setMessageHandler(this.onMessage.bind(this)) JavascriptAPI.setStatusHandler(this.onStatus.bind(this))。

当我运行它时，我收到以下错误 polyfills.bundle.js:2610 未捕获的类型错误：JavascriptAPI.be 不是函数 在 WebSocket.e2.onopen （在 webpackJsonp.../../../../script-loader/addScript.js.module.exports (scripts.bundle.js:28) 进行评估，:69:404）在 WebSocket.wrapFn [as __zone_symbol___onopen] (polyfills.bundle.js:3484) 在 ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.bundle.js:2839) 在 Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (polyfills.bundle.js:2606) 在 ZoneTask.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneTask.invokeTask [作为调用] (polyfills.bundle.js:2913) 在调用任务（polyfills.bundle.js:3779）在 WebSocket.globalZoneAwareCallback (polyfills.bundle.js:3797)

import { Injectable } from '@angular/core'

declare var JavascriptAPI: any;

@Injectable()
export class SampleService  {

     constructor() { }

      onMessage(messages) {
        console.log('onMessage', messages)
      }

      onStatus(messages) {
        console.log('onStatus', messages)
      }

      onInit(token: string) {
        JavascriptAPI.disconnect()
        JavascriptAPI.setConnect(token)
        const serverUrl = ['http://localhost:8080']
        JavascriptAPI.setServers(serverUrl)
        JavascriptAPI.setMessageHandler(this.onMessage.bind(this))
        JavascriptAPI.setStatusHandler(this.onStatus.bind(this))
      }
  }

谢谢，感谢您的宝贵时间。

【问题讨论】：

您的示例没有足够的信息来告诉您如何修复它，但看起来您需要找出 JavascriptAPI 在全局命名空间中的位置并将其分配给该变量。所以如果有一个window.JavascriptAPI 对象，你会这样写：declar var JavascriptAPI: any = window.JavascriptAPI。不知道该代码在哪里，但这是基本概念。通常我会在遇到这些问题时设置一个断点并检查窗口对象中发生的事情以了解如何引用代码
感谢您的快速回复，我想知道我将 typescript 方法 onMessage 作为函数传递给 JavascriptAPI.setMessageHandler() 函数的方式正确/错误？这是正确的方法吗？ webpack 抱怨 onMessage 不是一个函数。
我会给你更多的提示，但我会把它放在下面的答案中，因为这里没有足够的空间。
我不确定您是否理解我的问题或者我对您的回答的理解是否正确，我在访问 JavaScriptAPI 时没有任何问题。我能够访问 JavaScriptAPI，以下代码均由 webpack 正确编译， JavascriptAPI.disconnect() JavascriptAPI.setConnect(token) const serverUrl = ['localhost:8080']JavascriptAPI.setServers(serverUrl) 涉及到 JavascriptAPI。 setMessageHandler(this.onMessage.bind(this))，webpack 抱怨 this.onMessage.bind(this) 不是函数
我需要知道，如何将 typescript 类方法/函数（作为回调函数）传递给 JavascriptAPI 的 setMessageHandler 函数

标签： javascript angular typescript2.0

【解决方案1】：

因此，您已经获得了位于 typescript 命名空间之外的 javascript 功能，即“Javascript API”。

假设 JavascriptAPI 的脚本如下所示：

<script>
var JavascriptAPI = function(){
   return {
       disconnect: function() {},
       setConnect: function(token),
       // more functions 
       }
}
</script>

当您运行该脚本时，它将在全局命名空间内创建一个变量，该变量可以通过 window 对象访问。尝试删除“脚本”标签并在控制台中运行它。

当您在控制台中时，您现在可以通过两种方式访问该变量。您可以键入“JavascriptAPI”，毫不奇怪，您会看到返回的函数。这是我们更关心的第二种方式。尝试在控制台中输入“window.JavascriptAPI”。您将看到相同的值。这就是您在声明变量时要在组件中指向的变量。

现在这只是您的 JavascriptAPI 函数的假设实现。但关键是，一旦它全部运行，你想弄清楚它在你的应用程序的命名空间中的位置。所以如果它像这个例子一样工作

declare var JavascriptAPI: any = window.JavascriptAPI;

Typescript 可能会抛出错误/警告，指出类型窗口上不存在属性 JavascriptAPI。如果错误弹出，可能有更好的方法来解决它，但这是您可以做到的一种方法。

  var windowCopy = window as any;
declare var JavascriptAPI: any = windowCopy.JavascriptAPI;

换句话说，您可能希望使用第二段代码来避免使用 typescript 获得警告，但概念是相同的。

如果您无法通过查看“JavascriptAPI”的代码来确定如何引用它，请尝试在某处放置一个断点并查看窗口对象以查看它所在的位置，然后引用它。

【讨论】：