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

Question

我有一个使用外部 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 [作为 __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) 在 invokeTask (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))
      }
  }

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

Answer 1

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

假设 JavascriptAPI 的脚本如下所示:

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

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

当您在控制台中时，现在可以通过两种方式访问​​该变量。您可以键入“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”，请尝试在某处放置一个断点并查看窗口对象以查看它位于何处，然后引用它。