DOM компонента не обновляется, если данные изменяются при просмотре другого компонента

У меня есть приложение с несколькими компонентами, каждый из которых асинхронно отображает разные данные. Я использую routerLink для навигации между различными компонентами.

Проблема в том, что если я в настоящее время просматриваю компонент B, когда данные в компоненте A изменяются, DOM не обновляется новыми данными, когда я возвращаюсь к компоненту A. (список ngFor будет продолжать отображать test1, test2 вместо данных получено.) Однако, используя console.info, я вижу в Dev Tools, что данные все еще принимаются компонентом A, когда я просматриваю компонент B. Если я нахожусь в компоненте A, когда новые данные получены, DOM обновляется и новые данные отображаются правильно.

Есть ли что-то, что мне нужно сделать, чтобы убедиться, что DOM обновляется при переходе обратно к компоненту? Я полагаю, что, вероятно, мог бы обнаружить NavigationEnd и присвоить данные самому себе. Есть ли что-то, что мне не хватает?

Заранее спасибо, вот код:

Компонент А

import { Component, OnInit, ChangeDetectionStrategy, NgZone } from '@angular/core';
import { DataService } from '../../services/data.service';

@Component({
  selector: 'app-metars',
  templateUrl: './metars.component.html',
  styleUrls: ['./metars.component.scss'],
  changeDetection: ChangeDetectionStrategy.Default
})
export class TestComponent implements OnInit {

  public dataArray = ['test1', 'test2'];

  constructor(private _dataService: DataService, private zone: NgZone) { }

  ngOnInit() {
    this._dataService.data$
    .subscribe( data => {
        this.zone.run(() => {

          this.dataArray = data;
          console.info(data); // When in Component B, this is still firing in Dev Tools and I can see the new data being pushed.
        });
      }
    );
  }

}

Компонент А HTML

<ul *ngFor = "let data of dataArray">
    {{ data }}
</ul>
<br/>

Служба данных

export class DataService {

  private data: string[] = new Array<string>();
  private _dataSource = new Subject<string[]>();

  data$ = this._dataSource.asObservable();


  constructor(public electronService: ElectronService) {

    this.intitalizeIPCs();
  }


  intitalizeIPCs() {

    this.electronService.ipcRenderer.on('receive-data', (event, arg) => {
      console.info('received data');
      this.data = arg;
      this._dataSource.next(this.data);
    });
  }

App.component.html

<app-nav></app-nav>
<div class = "content">
    <router-outlet></router-outlet>
</div>

РЕДАКТИРОВАТЬ - РЕШЕНИЕ С КОДОМ

Принятый ответ ниже. Правильная реализация этого заключается в использовании асинхронного канала. После переключения на асинхронный канал я продолжал сталкиваться с проблемой, из-за которой, если данные изменялись в службе, компонент не видел изменения до повторного перехода к нему. Проблема была решена путем инкапсуляции внутри NgZone. Рабочий код ниже:

Услуга:

import { Injectable, NgZone } from '@angular/core';
import { ElectronService } from '../providers/electron.service';
import { Observable, BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})

export class DataService {

  private _data: BehaviorSubject<Array<string>> = new BehaviorSubject([]);
  public readonly data: Observable<Array<string>> = this._data.asObservable(); // Access this directly using async pipe.

  constructor(public electronService: ElectronService, private zone: NgZone) {

    this.intitalizeIPCs();
  }

  intitalizeIPCs() {
    this.electronService.ipcRenderer.on('receive-data', (event, arg) => {
      this.zone.run(() => {
        this._data.next( arg );
      });
    });
  }
}

Компонент:

import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
import { DataService } from '../../services/metar.service';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.scss'],
  changeDetection: ChangeDetectionStrategy.Default
})
export class ExampleComponent implements OnInit {

  constructor(private _dataService: DataService) { }

  ngOnInit() {
  }


}

HTML

<ul *ngFor = "let metar of _metarService.metars | async">
    {{ metar }}
</ul>