Предаване на данни към родителския компонент в 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()">
  изпрати данни
</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>