Prenos dát do nadradenej komponenty v Angular

Dáta je možné prenášať z podradenej komponenty do nadradenej. To sa robí vyžarovaním udalostí pomocou špeciálneho objektu EventEmitter a metódy emit. Podradená komponenta bude vyžarovať udalosti, pričom spolu s udalosťou prenesie nejaké dáta, a nadradená komponenta bude chytať udalosti, získavajúc dáta z nadradenej komponenty.

Vyskúšajme si to v praxi. Na to potrebujeme urobiť niekoľko krokov. Najprv do našej podradenej komponenty importujeme dekorátor @Output a triedu EventEmitter:

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

Teraz v podradenej triede vytvoríme vlastnosť onData, ktorej hodnotou bude nový objekt EventEmitter, obsahujúci reťazec:

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

Teraz vytvorme metódu send, ktorej volanie bude vyžarovať udalosť onData do nadradenej komponenty so zadaným textom:

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

V šablóne podradenej komponenty vytvorme tlačidlo, po kliknutí na ktoré sa bude volať metóda send:

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

V nadradenej komponente vytvorme metódu onData, ktorá sa bude automaticky volať, keď z podradenej komponenty bude vyžarená príslušná udalosť. Do parametra metódy budú prechádzať prenesené dáta:

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

V šablóne nadradenej komponenty previažme na tag podradenej komponenty udalosť:

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