Angular-5 如何使用单个事件从多个 children 到 parent 获取数据？

Question

我有一个场景，我的网页中有 3 个选项卡，在选项卡内容区域中，三个不同的组件在激活每个选项卡时加载（比如组件 'ABC'、'PQR'、'XYZ').在存在选项卡的主页中，我必须显示一些与选项卡中加载的选项卡内容相关的 header 数据。假设如果加载了选项卡 BAC，我必须显示从 ABC 组件发送的一些消息，同样适用于所有三个组件。

我尝试使用单个组件，但我的事件监听器不工作。

主选项卡页面（Parent 组件）： 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');
  }
}

同样，我还有两个组件在其构造函数调用中发出 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');
    }
}

Angular-5 如何使用单个事件从多个 children 到 parent 获取数据？

Angular-5 how to get data from multiple children to parent using single event?

angular

angular-event-emitter