मेरे पास निम्न ChatPanelComponent है जिसमें मैंने सॉकेट प्राप्त करने के लिए एक getSocket विधि बनाई है और सॉकेट कनेक्ट होने पर onopen EventListener कहा जाता है।

import { AfterViewInit, Component, ElementRef, OnDestroy, OnInit, QueryList, ViewChild, ViewChildren, ViewEncapsulation } from '@angular/core';
import { NgForm } from '@angular/forms';
import { HttpClient } from '@angular/common/http';

import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
import { FusePerfectScrollbarDirective } from '@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive';
import { ChatPanelService } from 'app/layout/components/chat-panel/chat-panel.service';
import { WebsocketService, UserService } from 'app/core/services';

@Component({
    selector     : 'chat-panel',
    templateUrl  : './chat-panel.component.html',
    styleUrls    : ['./chat-panel.component.scss'],
    encapsulation: ViewEncapsulation.None
})
export class ChatPanelComponent implements OnInit, AfterViewInit, OnDestroy
{
   contacts: any[];
   chat: any;
   selectedContact: any;
   ws: any;
   ws_url: any;
   user_id: any;
   
   constructor(
        private _chatPanelService: ChatPanelService,
        private _user: UserService,
        private _WebSocket: WebsocketService,
   )

   ngOnInit(): void
   {
       this.ws_url = 'http://localhost:8000/thread/';
       this.user_id = this._user.getUser().id;
       this.getSocket(this.user_id);
   }

   getSocket(id: any) {
       this.ws = this._WebSocket.connect(this.ws_url+id+'/');
 
       this.ws.onopen = function(e){
           console.log("WEBSOCKET OPEN", e);
       }

       this.ws.onmessage = function(e) {
           this.showMessage(e);
       }
  }

  showMessage(msg: any){
       console.log("MESSAGE", msg);
  }
}

जब onmessage घटना होती है तो मैं showMessage(msg: any) विधि को कॉल करना चाहता हूं और ईवेंट डेटा को showMessage() विधि में पास करना चाहता हूं। लेकिन जब विधि कहा जाता है तो यह निम्न त्रुटि देता है:

ERROR TypeError: this.showMessage is not a function
    at WebSocket.ws.onmessage [as __zone_symbol__ON_PROPERTYmessage]

मैं विधि को कॉल करने के किसी अन्य तरीके के बारे में नहीं सोच सकता। मुझे इसमें मदद चाहिए। अग्रिम में धन्यवाद!

0
Ajay Lingayat 10 पद 2020, 10:27

2 जवाब

सबसे बढ़िया उत्तर

क्या आपने तीर फ़ंक्शन का उपयोग करने का प्रयास किया है? यह संदर्भ को सुरक्षित रखता है।

this.ws.onmessage = (e) => { this.showMessage(e); }

1
maidi 10 पद 2020, 12:23

क्योंकि इवेंट कॉलबैक को एंगुलर के संदर्भ के बाहर निष्पादित किया जाता है, this कोणीय घटकों के बजाय कॉलबैक इवेंट के संदर्भ को संदर्भित करता है। इसलिए this अब घटक के संदर्भ को संदर्भित नहीं करता है।

आप किसी अन्य स्थानीय चर के अंदर this का मान सहेज सकते हैं और उसका उपयोग कर सकते हैं:

getSocket(id: any) {
       this.ws = this._WebSocket.connect(this.ws_url+id+'/');
 
       this.ws.onopen = function(e){
           console.log("WEBSOCKET OPEN", e);
       }

       const self = this; // <- store this value in a local variable

       this.ws.onmessage = function(e) {
           self.showMessage(e); //<- use that local variable containing value of component's context
       }
}

इसके बारे में अधिक जानकारी के लिए कृपया इस उत्तर को देखें: https://stackoverflow.com/a/20279485/9722122

1
Mustahsan 10 पद 2020, 11:15