Angular 4 поднять необработанное событие для родителя

Question

У меня есть эта структура внутри основного компонента администратора турнира

админ-tournament.component.html:

<fixture-league></fixture-league>

Светильник-league.component.html

<md-tab-group>
  <md-tab *ngFor="let f of fixture" label="{{ f.date | date }}">
    <match *ngFor="let m of f" [match]="m"></match>
  </md-tab>
</md-tab-group>

match.component.html

<team [team]="match.local_team" (click)="onLocalClick.emit()"></team>
<ul>
   <li (click)="onDateClick.emit()">{{ match.date | date:"HH:mm"}}</li>
   <li (click)="onResultClick.emit()">{{ match.result | myResultPipe }}</li>
<ul>
<team [team]="match.visitor_team" (click)="onVisitorClick.emit()"></team>

Я хочу обработать события щелчка, которые генерируются в MatchComponent внутри AdminTournamentComponent, а не в FixtureLeagueComponent (потому что я хочу изменить поведение других "TournamentComponents", но сохранить структуру FixtureComponent).

Есть ли возможность поднять необработанные события для родителя "fixture-league", например:

<fixture-league (onDateClick)="doSomething()"></fixture-league>

Если нет, как я могу избежать создания тех же источников событий на FixtureComponent, но обрабатывать эти события на AdminTournamentComponent?

Answer 1

При работе с несколькими уровнями компонентов обычно проще перенести обработку событий на выделенный сервис. Каждый компонент может затем внедрить этот сервис и либо подписаться на событие, либо выдать ему какое-то значение.

import { EventEmitter, Injectable } from '@angular/core';

@Injectable()
export class MyEventService {

  private emitter = new EventEmitter<any>();

  public subscribe(callback: Function): void {
    this.emitter.subscribe(callback);
  }

  public emit(value: any = {}): void {
    this.emitter.emit(value);
  }

}

Затем внедрите такой сервис и используйте его:

constructor(public eventService: MyEventService) {}

// emitting
<team [team]="match.local_team" (click)="evetService.emit('localClick')"></team>

// subscribing
ngOnInit() {
    this.eventService.subscribe(type => { console.log(type); });
}