Angular-5, как получить данные от нескольких дочерних элементов к родительскому, используя одно событие?

У меня есть сценарий, в котором у меня есть 3 вкладки на моей веб-странице, где в области содержимого вкладок при активации каждой вкладки загружаются три разных компонента (скажем, компоненты «ABC», «PQR», «XYZ»). На главной странице, на которой присутствуют вкладки, я должен показать некоторые данные заголовка, связанные с содержимым вкладки, загруженным на вкладку. Предположим, если вкладка BAC загружена, я должен показать какое-то сообщение, отправленное из ABCcomponent, аналогично для всех трех компонентов.

Я пробовал с одним компонентом, но мой список событий не работает.

Главная страница вкладок (родительский компонент): файл HTML tabs.component.html:

 <h1>{{headerMessage}}</h1>

<my-tabs [items]="tabItems">
    <router-outlet (tabHeaderTextEvent)="receiveHeaderText($event)"></router-outlet>
</my-tabs>

tabs.component.ts:

import { Component, OnInit } from '@angular/core';
import { TabItem } from '@MYCOMPONENTS/tabs';

@Component({
  selector: 'MYPAGE-tabs',
  templateUrl: './tabs.component.html',
  styleUrls: ['./tabs.component.scss']
})
export class TabsComponent implements OnInit {
  public headerMessage: String;
  public tabItems: TabItem[] = [];

  constructor(private authService: AuthService) {
    this.tabItems = [{
      routerPath: 'abc',
      label: 'ABC_LABEL',
    }, {
      routerPath: 'PQR',
      label: 'PQR_LABEL',
      disabled: true
    },
    {
      routerPath: 'XYZ',
      label: 'XYZ_LABEL',
      disabled: true
    }];
  }

  receiveHeaderText($event) {
    console.log('***********************************');
    console.log($event);
    this.headerMessage = $event;
  }
}

Child.component.ts (откуда я хочу отправить данные):

import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';

@Component({
    selector: 'someSelector',
  templateUrl: './sometemplate.component.html'
})
export class Child implements OnInit {
  @Output() tabHeaderTextEvent = new EventEmitter<string>();

  constructor() {
    this.tabHeaderTextEvent.emit('hello from overview component');
  }
}

Точно так же у меня есть еще два компонента, которые генерируют tabHeaderTextEventevent при вызове конструктора. Но моя функция прослушивания в моем компоненте вкладки никогда не вызывается. Может ли кто-нибудь указать мне, где я ошибаюсь? ИЛИ Любой лучший подход для достижения того же. Заранее спасибо.