Տվյալների փոխանցում ծնողական կոմպոնենտին Angular-ում

Հնարավոր է տվյալներ փոխանցել դուստր կոմպոնենտից ծնողականին։ Դա արվում է իռարման իրադարձություններ հատուկ օբյեկտի EventEmitter և մեթոդի emit միջոցով։ Դուստր կոմպոնենտը կիրարվի իրադարձություններ՝ միաժամանակ իրադարձության հետ փոխանցելով որոշ տվյալներ, իսկ ծնողական կոմպոնենտը կբռնի իրադարձությունները՝ ստանալով տվյալները ծնողական կոմպոնենտից։

Փորձենք գործնականում։ Դրա համար մեզ անհրաժեշտ է կատարել մի շարք քայլեր։ Սկզբում մեր դուստր կոմպոնենտում իմպորտացնենք դեկորատորը @Output և կլասը EventEmitter:

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

Այժմ դուստր կլասում ստեղծենք հատկություն onData, որի արժեքը կլինի նոր օբյեկտ EventEmitter, որը պարունակում է տող՝

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

Այժմ ստեղծենք send մեթոդը, որի կանչը կիրարվի onData իրադարձությունը ծնողական կոմպոնենտ նշված տեքստով՝

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

Դուստր կոմպոնենտի թեմփլեյթում ստեղծենք կոճակ, որի վրա կլիկի ժամանակ կկանչվի send մեթոդը՝

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

Ծնողական կոմպոնենտում ստեղծենք մեթոդ onData, որն ավտոմատ կերպով կկանչվի, երբ դուստր կոմպոնենտից կիրարվի համապատասխան իրադարձությունը։ Մեթոդի պարամետրի մեջ կհայտնվեն փոխանցված տվյալները՝

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

Ծնողական կոմպոնենտի թեմփլեյթում կապենք դուստր կոմպոնենտի թեգին իրադարձությունը՝

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