Angular 11: ERROR TypeError: “... is not a function”. But actually it is

Question

我正在开发基于 webrtc 的 Audio/Video 会议应用程序。为此，我在 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

如果 onRoomJoined 函数像 onontrack = onRoomJoind 一样作为回调函数被调用，那么 this 不再是 Angular 组件。您可以通过将此或 setUpConnection 函数作为参数传递给 onRoomJoined 并在其中 use/call 来解决此问题。

Answer 2

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

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

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

你应该做的是：

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

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

Angular 11: ERROR TypeError: “... is not a function”. But actually it is

Angular 11: ERROR TypeError: “... is not a function”. But actually it is

javascript

typeerror

angular