javascript - Angular 11 : ERROR TypeError: “... is not a function” . 但实际上是

Question

我正在开发基于 webrtc 的音频/视频 session 应用程序。为此，我在 Angular 11 和后端节点(快速服务器)中创建了一个前端。所以我使用 vanilla JS、HTML、CSS 创建了这个应用程序并且它运行良好。但是，当我尝试将前端转换为 Angular 应用程序时，问题就来了。

应用程序的工作是这样的，首先我创建了房间，我将得到一个 roomId 并将其发送给另一个人，他使用该 roomId 加入聊天室。

当另一个人加入房间时，onRoomJoined() 在我这边被执行。

async onRoomJoined(data) {
    await this.setUpConnection(data['client-id'], data['client-name']);
    this.socket.emit('send-metadata', { 'room-id': this.roomId, 'client-name': this.clientName, 
      'client-id': this.clientId, 'peer-id': data['client-id'] });
}

现在这个函数进一步调用setUpConnection()函数如下，

  async setUpConnection(peerId, peerName, initiateCall = false){
    const videoElement = this.getVideoElement(peerId, 0, peerName);
    videoElement.autoplay = true;
    videoElement.playsInline = true;
    this.peerConnections[peerId] = { 'peer-name': peerName, 'pc': new RTCPeerConnection(iceServers) };
    this.peerConnections[peerId].pc.ontrack = (track) => { this.setRemoteStream(track, peerId); };
    this.addLocalStreamTracks(peerId);
    this.peerConnections[peerId].pc.onicecandidate = (iceCandidate) => { this.gatherIceCandidates(iceCandidate, peerId); };
    this.peerConnections[peerId].pc.oniceconnectionstatechange = (event) => { this.checkPeerDisconnection(event, peerId); };
    if (initiateCall === true) {
      await this.createOffer(peerId);
    }
  }

以下是我在我这边(房间创建者)的浏览器控制台中遇到的错误，

ERROR Error: Uncaught (in promise): TypeError: this.setUpConnection is not a function
TypeError: this.setUpConnection is not a function
    at Socket.<anonymous> (home.component.ts:440)
    at Generator.next (<anonymous>)
    at tslib.es6.js:76
    at new ZoneAwarePromise (zone-evergreen.js:960)
    at __awaiter (tslib.es6.js:72)
    at Socket.onRoomJoined (home.component.ts:438)
    at Socket.push.cpc2.Emitter.emit (index.js:145)
    at Socket.emit (typed-events.js:46)
    at Socket.emitEvent (socket.js:263)
    at Socket.onevent (socket.js:250)
    at resolvePromise (zone-evergreen.js:798)
    at new ZoneAwarePromise (zone-evergreen.js:963)
    at __awaiter (tslib.es6.js:72)
    at Socket.onRoomJoined (home.component.ts:438)
    at Socket.push.cpc2.Emitter.emit (index.js:145)
    at Socket.emit (typed-events.js:46)
    at Socket.emitEvent (socket.js:263)
    at Socket.onevent (socket.js:250)
    at Socket.onpacket (socket.js:214)
    at Manager.push.cpc2.Emitter.emit (index.js:145)

这里 onRoomJoined() 和 setUpConnection() 这两个函数都在 home.component.ts 文件中。我仍然收到 TypeError: this.setUpConnection is not a function。

这怎么可能？

感谢任何帮助，谢谢!

Answer 1

我认为您误解了“this”关键字。事件处理程序中的“this”将引用套接字实例而不是组件本身，因此它将无法在其附近找到您的 setUpConnection() 函数。您需要做的是尝试在事件处理程序中使用箭头函数而不是回调函数。例如，如果您已经完成:

socket.on('some-event', onRoomJoined);

function onRoomJoined(data) {
    ...
    ...
    ...
}

你应该做的是:

socket.on('some-event', (data) => {
    ...
    ...
    ...
});

现在在箭头函数中，关键字“this”将引用您的组件，您将能够毫不费力地调用 setUpConnection() 函数。