Angular 2 - 无法从 SignalR 范围访问组件 members/methods

Question

我正在尝试将 signalr（外部加载的脚本）与 angular 2 个组件一起使用，但面临有线问题。我的函数在打字稿中被调用，其中包含我从 WebAPI 传递的正确信息，但在这些打字稿函数中，我不能使用我声明的任何属性或函数。

通过我的 WebAPI，我通知客户

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

这会在我的 angular 组件中启动一个调用，我在其中定义了它

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

我试过打电话

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

来自组件的 ngAfterViewInit、OnInit 和构造函数，但 none 有效。

我猜到问题是 signalr 的接收器是在 typescript 函数中定义的，因此在外部调用时它可能没有正确的上下文。

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

Answer 1

很多例子都有同样的问题。根据经验，永远不要在类中使用 function 关键字。这会将 this 上下文替换为当前函数范围的上下文。始终使用 () => {} 表示法：

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

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

    jQuery.connection.hub.start();
}

Angular 2 - 无法从 SignalR 范围访问组件 members/methods

Angular 2 - Cannot access component members/methods from SignalR scope

javascript

signalr

signalr-hub

typescript

angular