Angular SPA - не показывает элементы, отправленные с сервера через SignalR при перезагрузке компонента

Question

Я довольно новичок в комбинации Angular 8 + SignalR и столкнулся с очень раздражающей проблемой. У меня есть компонент, который отображает элементы, отправленные с помощью SignalR, без каких-либо проблем, но когда я перехожу к другому компоненту и возвращаюсь к первому, элементы не отображаются, однако я вижу, что элементы в журнале всплывают через SignalR снова, но UI не обновляется.

Компонент, называемый списками, который на ngOnInit() открывает соединение Signal, вызывает сервер и создает привязки для обработки изменений в * Концентратор 1008 * на сервере.

ngOnInit() {
this.signalRService.connection();
this.startHttpRequest();
this.signalRService.hubConnection.on('ListingResponse', (data) => {
  console.log(data);
  this.ListingsData = data;
});

this.signalRService.hubConnection.on('ListingAdded', (data) => {
  console.log(data);
  this.ListingsData.push(data);
});
}

private startHttpRequest = () => {
this.http.get('/LongDistListing/')
  .subscribe(res => {
    console.log(res);
  });
}

Это отлично работает. Этот компонент добавляется к домашнему компоненту и загружает элементы, когда приложение запускается без каких-либо проблем, однако, когда я нажимаю на другую ссылку в навигационном меню, кроме предыдущей, UI не отображает списки. Я вижу журналы консоли и списки отправляются обратно через SignalR.

Компонент листинга ngOnInit() работает, работает на стороне сервера, я вижу списки, отправляемые обратно через SignalR, но Я понятия не имею, где проблема ..

RouterModule.forRoot([
  { path: '', component: HomeComponent, pathMatch: 'full' },
  { path: 'counter', component: CounterComponent }
]),

Какое отношение имеет SPA маршрутизация?

Answer 1

Мне удалось выяснить, почему это не работает. Как вы можете видеть на ngOnInit(), сначала я подключаюсь к SignalR hub, затем вызываю контроллер, который в конечном итоге получит результат через SignalR, а последние два метода будут SignalR "слушателями".

Первая проблема, у вас есть настройка «слушателей» перед вызовом контроллера, но основная проблема заключалась в том, что на this.signalRService.connection(); потребовалось больше времени для подключения к SignalR hub, поэтому списки уже были оттолкнулся от сервера задолго до того, как FE был подключен к SignalR hub на сервере и смог подписаться на любые изменения.

Как решить эту проблему: Вы должны обязательно дождаться подключения к fini sh first.

Также это довольно неприятная проблема, поскольку она отлично работает при загрузке страницы, однако, когда вы загружаете другой компонент в Angular и go обратно к компоненту с SignalR список, он не будет работать