Přenos dat do rodičovské komponenty v Angular

Data lze přenášet z dceřiné komponenty do rodičovské. To se provádí vysíláním událostí pomocí speciálního objektu EventEmitter a metody emit. Dceřiná komponenta bude vysílat události a přenášet spolu s událostí nějaká data, zatímco rodičovská komponenta bude události zachytávat a získávat data z dceřiné komponenty.

Pojďme to vyzkoušet v praxi. K tomu potřebujeme udělat několik kroků. Nejprve do naší dceřiné komponenty importujeme dekorátor @Output a třídu EventEmitter:

app/user/user.component.tsimport { Component, Output, EventEmitter } from '@angular/core';

Nyní ve dceřiné třídě vytvoříme vlastnost onData, jejíž hodnotou bude nový objekt EventEmitter, obsahující řetězec:

app/user/user.component.tsexport class UserComponent {
  @Output()
  public onData = new EventEmitter<string>();
}

Nyní vytvoříme metodu send, jejíž volání bude vysílat událost onData do rodičovské komponenty s daným textem:

app/user/user.component.tsexport class UserComponent {
  @Output()
  public onData = new EventEmitter<string>();
  
  send() {
    this.onData.emit('xxx');
  }
}

V šabloně dceřiné komponenty vytvoříme tlačítko, jehož kliknutím se bude volat metoda send:

app/user/user.component.html<button (click)="send()">
  send data
</button>

V rodičovské komponentě vytvoříme metodu onData, která se bude automaticky volat, když z dceřiné komponenty bude vyslána odpovídající událost. Do parametru metody budou předána přenášená data:

app/app.component.tsexport class AppComponent {
  public onData(data: string) {
    console.log(data);
  }
}

V šabloně rodičovské komponenty připojíme k tagu dceřiné komponenty událost:

app/app.component.html<app-user (onData)="onData($event)"></app-user>