Angulaire 2 - Impossible d'accéder aux membres/méthodes du composant depuis la portée SignalR

Question

J'essaie d'utiliser signalr (scripts externes) avec des composants angulaires 2 mais confrontés à un problème câblé. Mes fonctions sont appelées en caractères dactylographiés avec les informations correctes que je passe de WebAPI mais à l'intérieur de ces fonctions, je ne peux utiliser aucune de mes propriétés ou fonctions déclarées.

De mon WebAPI, je notifiante les clients comme

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

Cela déclenche un appel dans mon élément angulaire où je l'ai défini comme

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(); 
    } 
} 

J'ai essayé d'appeler

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

à partir de ngAfterViewInit, OnInit et le constructeur du composant mais aucun travaillé.

Je peux deviner le problème que le récepteur de signalr est défini à l'intérieur d'une fonction dactylographiée de sorte qu'il peut ne pas avoir le bon contexte lorsqu'il est appelé de l'extérieur.

Est-il possible d'accéder aux membres déclarés à partir de cette fonction NotifyManager_BidPlaced?

Answer 1

Beaucoup d'exemples avec le même problème. Règle générale, n'utilisez jamais le mot-clé function dans vos classes. Cela remplacera le contexte this par celui de la portée de fonction actuelle. Toujours utiliser la 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(); 
}