Adatátvitel a szülő komponensbe az Angularban

Lehetőség van adatokat átvinni a gyermek komponensből a szülő komponensbe. Ezt események kibocsátásával érjük el, a speciális EventEmitter objektum és a emit metódus segítségével. A gyermek komponens eseményeket bocsát ki, együtt néhány adattal, míg a szülő komponens elkapja ezeket az eseményeket, és megkapja az adatokat a szülő komponensből.

Próbáljuk ki a gyakorlatban. Ehhez számos lépést kell megtennünk. Először is, a gyermek komponensünkbe importáljuk a @Output dekorátort és a EventEmitter osztályt:

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

Most a gyermek osztályban készítsünk egy onData tulajdonságot, melynek értéke egy új EventEmitter objektum lesz, ami egy string típust tartalmaz:

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

Most készítsünk egy send metódust, amelynek meghívása egy onData eseményt bocsát ki a szülő komponensbe a megadott szöveggel:

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

A gyermek komponens template-jében készítsünk egy gombot, amelyre kattintva a send metódus hívódik meg:

app/user/user.component.html<button (click)="send()">
  adat küldése
</button>

A szülő komponensben készítsünk egy onData metódust, amely automatikusan meg fog hívódni, amikor a gyermek komponensből ki lesz bocsátva a megfelelő esemény. A metódus paraméterébe fognak kerülni az átadott adatok:

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

A szülő komponens template-jében kötssük a gyermek komponens tagjához az eseményt:

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