Posredovanje podatkov v starševsko komponento v Angular

Podatke je mogoče posredovati iz podrejene komponente v starševsko. To naredimo z oddajanjem dogodkov s pomočjo posebnega objekta EventEmitter in metode emit. Podrejena komponenta bo oddajala dogodke in hkrati z dogodkom posredovala nekatere podatke, starševska komponenta pa bo lovila dogodke in prejemala podatke iz starševske komponente.

Poskusimo v praksi. Za to moramo narediti vrsto korakov. Najprej v našo podrejeno komponento uvozimo dekorator @Output in razred EventEmitter:

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

Zdaj v podrejenem razredu naredimo lastnost onData, katere vrednost bo nov objekt EventEmitter, ki vsebuje niz:

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

Zdaj naredimo metodo send, katere klic bo oddal dogodek onData v starševsko komponento z danim besedilom:

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

V predlogi podrejene komponente naredimo gumb, ob kliku na katerega se bo klicala metoda send:

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

V starševski komponenti naredimo metodo onData, ki se bo samodejno klicala, ko iz podrejene komponente bo oddan ustrezen dogodek. V parameter metode bodo prišli posredovani podatki:

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

V predlogi starševske komponente vežimo na oznako podrejene komponente dogodek:

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