javascript - 从 SignalR 在事件处理程序中访问属性时始终未定义属性

Question

我构建了一个 Angular 应用程序，我正在使用 signalR 获取通知。

对于 signalR 的东西，我已经安装了“@aspnet/signalr”:“^1.0.4”。

在 Angular 应用程序中，我构建了一个服务来处理通过 signalR 发送的所有通知:

private _hubConnection: HubConnection;

numberX: number = 0;

constructor() {
  this.createConnection();
  this.registerOnServerEvents();
  this.startConnection();
}

private createConnection() {
  this._hubConnection = new HubConnectionBuilder().withUrl(someURL).build();
}

private startConnection(): void {
  this._hubConnection.start();
}

private registerOnServerEvents(): void {
  this._hubConnection.on('Notify', (data: any) => {
    this.numberX++;
  });
}

当我从 signalR 获得事件时，事件处理程序实际上被调用，当我向控制台输出发送内容时，它实际上被写入控制台。

但是当我尝试访问一个成员属性(在本例中为 numberX)时，我总是会收到一个异常，告诉我 numberX 是未定义的，即使我在一开始就定义了它。

这可能是某种范围的事情吗？

编辑:Kenzk447 的解决方案实际上适用于我给定的场景。但是，当我更进一步，不仅仅是增加一个数字，而是使用一个可以被组件使用的 EventEmitter 时，这将不起作用:

在服务中:

someEvent: EventEmitter<any> = new EventEmitter();

private registerOnServerEvents(): void {
const $self = this;
this._hubConnection.on('ErrorMessage', (data: any) => {
     $self.someEvent.emit(data);
});

在组件中:

notificationCount: number = 0;

this.notificationService.someEvent.subscribe(this.onSomeEvent);

onSomeEvent(data: any) {
    this.notificationCount++;
}

执行此操作时，组件中的“this”未定义，我无法访问组件的属性。

编辑 2:

好的，我可以使用它 this solution

诀窍是绑定(bind)事件处理程序。

尽管如此，我还是会接受这个答案，因为它在我给出的示例中有效，并为我指明了正确的方向。

Answer 1

我在 SignalR 存储库上进行了研究，我 found :

methods.forEach((m) => m.apply(this, invocationMessage.arguments));

问题在这里:m.apply(this,...，SignalR 试图将“this”强加为 HubConnection 类实例。因此，我的解决方案:

private registerOnServerEvents(): void {
    const $self = this;
    this._hubConnection.on('Notify', (data: any) => {
         $self.numberX++;
    });
}