Обновить таблицу cdk при нажатии кнопки из другого компонента

Question

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

<button title="Name" routerLink="/name/0" (click) = "refreshNameData()" >
{{NameDetails?.nameCount}}</span>
 </button>

В своем классе angular2 я делаю вызов, чтобы получить обновленные данные.

@Output() NameData = new EventEmitter<INameData[]>();
NameListData :<INameData[]>

refreshNameData() {
   this.NameService.listNameItems().then(names=> {
   this.NameListData = names.slice();
   });
   this.NameData.emit(this.NameListData );
   this.router.navigate(['name/0']);
   }

Я хочу, чтобы эти обновленные данные ( NameListData) обновлялись функцией соединения таблицы CDK / таблицы Mat, которая находится в классе dataSource

Эти 2 компонента включены в мой проект следующим образом. Компонент заголовка включает кнопку. Функция розетки маршрутизатора ведет нас на вкладку NameData.

<header-component ></header-component>
<mat-sidenav-container style="min-height: 500px">
<mat-sidenav style="width:125px" #sidenav mode="side">
<div>
  <nav-component></nav-component>
 </div>
</mat-sidenav>
<div class="app-content">
<router-outlet></router-outlet>
</div>
</mat-sidenav-container>

Вопрос в том, что на моей странице 4 вкладки. Поэтому переход с одной вкладки на другую не обновляет страницу. Но мне нужно обновить данные имени по нажатию кнопки. (Также кнопка находится на совершенно другом компоненте)