Angular 2-无法从SignalR范围访问组件成员/方法

Question

I am trying to use signalr (externally loaded scripts) with angular 2 components but facing a wired issue. My functions are getting called in typescript with correct information that I am passing from WebAPI but inside those typescript functions I cannot use any of my declared properties or functions.

From my WebAPI, I am notifying the clients like

IHubContext hubContext = GlobalHost.ConnectionManager.GetHubContext<CarBidHub>();
hubContext.Clients.All.NotifyManager_BidPlaced(message);

This initiates a call in my angular component where I have defined it like

declare var jQuery: any;
declare var moment: any;
var hub = jQuery.connection.carBidHub;  //declaring hub
@Component({
    selector: 'live-auction',
    templateUrl: '/auctions/live/live-auction.html'
})
export class LiveAuctionComponent
{
    ...
    constructor(private notificationService: NotificationsService)
    {
    }
    ...

    private startHub(): void {
            jQuery.connection.hub.logging = false;

            hub.client.NotifyManager_BidPlaced = function (message:string) {
                //this message is printed on all connected clients
                console.log(message);   

                //but this line below throws an error on all members I am trying to access with "this."
                this.notificationService.success('Information', message);   
            }

            //this.notificationService is available here

            //Start the hub
            jQuery.connection.hub.start();
    }
}

I have tried to call

//call start hub method 
this.startHub();

from ngAfterViewInit, OnInit and constructor of the component but none worked.

I can guess the issue that signalr's receiver is defined inside a typescript function so it might not have the right context when called externally.

Is there a way I could access declared members from this NotifyManager_BidPlaced function?

Answer 1

Lots of examples out there with the same issue. Rule of thumb, never use the function keyword inside your classes. This will replace the this context with that of the current function scope. Always use the () => {} notation:

private startHub(): void {
    jQuery.connection.hub.logging = false;

    hub.client.NotifyManager_BidPlaced = (message:string) => { //here
      this.notificationService.success('Information', message);   
    };

    jQuery.connection.hub.start();
}