Duomenų perdavimas į pagrindinį komponentą Angular

Galima perduoti duomenis iš vaikinio komponento į pagrindinį. Tai daroma išmetant įvykius naudojant specialųjį objektą EventEmitter ir metodą emit. Vaikinis komponentas išmes įvykius, kartu perduodant su įvykiu tam tikrus duomenis, o pagrindinis komponentas gaudys įvykius, gaunant duomenis iš pagrindinio komponento.

Pabandykime praktiškai. Tam mums reikia atlikti keletą žingsnių. Pirmiausia į mūsų vaikinį komponentą importuokime dekoratorių @Output ir klasę EventEmitter:

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

Dabar vaikinėje klasėje sukurkime savybę onData, kurios reikšmė bus naujas objektas EventEmitter, talpinantis eilutę:

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

Dabar sukurkime metodą send, kurio iškvietimas bus išmetantis įvykį onData į pagrindinį komponentą su nurodytu tekstu:

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

Vaikinio komponento šablone sukurkime mygtuką, paspaudus ant kurio bus iškviečiamas metodas send:

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

Pagrindiniame komponente sukurkime metodą onData, kuris bus automatiškai iškviečiamas, kai iš vaikinio komponento bus išmestas atitinkamas įvykis. Į metodo parametrą pateks perduoti duomenys:

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

Pagrindinio komponento šablone pririškime prie vaikinio komponento žymės įvykį:

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