Angular 8, когда я получаю сообщение веб-сокета, все введенные сервисы стали неопределенными

Question

Я реализовал websocket в обе стороны (бэкэнд и внешний интерфейс). Я получаю сообщение от бэкэнда. Проблема в том, когда я хочу отобразить сообщение, полученное в MatDialog или в ToAstr. оба они стали неопределенными, мой код компонента ниже

@Component({
 selector: 'app-upload-excel-file',
 templateUrl: './upload-excel-file.component.html',
 styleUrls: ['./upload-excel-file.component.scss']
})
export class UploadExcelFileComponent implements OnInit {

  constructor(

    private websocketService: UploadWebsocketService,
    private toastr: ToastrService,
    private dialog: MatDialog
  ) {}

  ngOnInit() {
    this.connect();
  }
  connect() {
    const obs = this.websocketService.getObservable();
    obs.subscribe(
      this.onMessageReceived,
      (err) => console.log(err)
    );
  } 
  public onMessageReceived(receivedMsg) {
    if (receivedMsg && receivedMsg.type === 'SUCCESS') {
    /* Todo update notification icon */
    const res = receivedMsg.message;
    this.toastr.info(res.success, 'result');
    this.dialog.open(ListDialogComponent, {
      closeOnNavigation: false,
      disableClose: true,
      data: res
    }).afterClosed().subscribe();
   }
  }
 }

При инициализации компонента все работает хорошо, но когда я получаю сообщение в websocket, у меня появляется ошибка, что служба в undefined

Answer 1

Эта проблема связана с обратным вызовом next, когда вы подписываетесь на свою наблюдаемую. Когда вы говорите this.onMessageReceived, вы передаете ссылку функции onMessageReceived. Когда вы передаете функцию таким образом, вы теряете this. Если вы напечатаете this в onMessageReceived, вы заметите, что this - это то, что вы ожидаете.

Теперь есть два решения для этого. Простой способ - просто использовать функцию стрелки в качестве обратного вызова next в вашей подписке.

const obs = this.websocketService.getObservable();
obs.subscribe(
  (receivedMsg) => this.onMessageReceived(receivedMsg),
  (err) => console.log(err)
);

Или вы можете выбрать привязку this к функции onMessageReceived в конструкторе.

export class UploadExcelFileComponent implements OnInit {
  constructor(
    private websocketService: UploadWebsocketService,
    private toastr: ToastrService,
    private dialog: MatDialog
  ) {
    // Bind your this
    this.onMessageReceived = this.onMessageReceived.bind(this);
  }
}

Answer 2

я просто изменяю this.onMessageПолучил функцию стрелки, и она работает для меня