Angular-5如何使用单个事件从多个孩子获取数据到父母？

Question

我有一个场景，我的网页中有 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。 但是我的选项卡组件中的侦听器函数永远不会被调用。 谁能指导我哪里出错了？ 或 任何更好的方法来实现同样的目标。 提前致谢。

Answer 1

您可以尝试使用 Injector。

import { Injector } from '@angular/core';
import { MyPageComponent } from "./mypage.component";
export class Child implements OnInit
    constructor(private injector: Injector) {
        let parentComponent = this.injector.get(MyPageComponent);
        parentComponent.receiveHeaderText('String');
    }
}