Angular-5如何使用单个事件将数据从多个子项获取给父项

Question

我有一个场景，我的网页中有三个选项卡，在选项卡内容区域中，激活每个选项卡时加载三个不同的组件(比如组件"ABC"、"QR"、"XYZ"(。在存在选项卡的主页面中，我必须显示一些与选项卡中加载的选项卡内容相关的标题数据。假设加载了选项卡BAC，那么我必须显示从ABC组件发送的一些消息，对于所有三个组件也是如此。

我尝试使用单个组件，但我的事件列表器不起作用。

主选项卡页面(父组件(：HTML文件tabs.component.HTML:

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

选项卡组件.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');
}
}

同样，我还有两个组件，它们在构造函数调用中发出tabHeaderTextEvent事件。但是，我的选项卡组件中的侦听器函数永远不会被调用。有人能告诉我哪里出了问题吗？或任何更好的方法来实现同样的目标。提前谢谢。

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');
}
}