Передача данных в родительский компонент в Angular
Можно передавать данные из дочернего компонента
в родительский. Это делается путем испускания
событий с помощью специального объекта EventEmitter
и метода emit. Дочерний компонент будет
испускать события, передавая вместе с событием
некоторые данные, а родительский компонент
будет ловить события, получая данные
из родительского компонента.
Давайте попробуем на практике. Для этого
нам нужно проделать ряд шагов.
Для начала в наш дочерний компонент импортируем
декоратор @Output и класс
EventEmitter:
import { Component, Output, EventEmitter } from '@angular/core';
Теперь в дочернем классе сделаем
свойство onData, значением
которого будет новый объект EventEmitter,
содержащий строку:
export class UserComponent {
@Output()
public onData = new EventEmitter<string>();
}
Теперь сделаем метод send,
вызов которого будет испускать событие
onData в родительский компонент
с заданным текстом:
export class UserComponent {
@Output()
public onData = new EventEmitter<string>();
send() {
this.onData.emit('xxx');
}
}
В темплейте дочернего компонента
сделаем кнопку, по клику на которую
будет вызываться метод send:
<button (click)="send()">
send data
</button>
В родительском компоненте сделаем
метод onData, который будет
автоматически вызываться, когда
из дочернего компонента будет
испущено соответствующее событие.
В параметр метода будут попадать
переданные данные:
export class AppComponent {
public onData(data: string) {
console.log(data);
}
}
В темплейте родительского компонента привяжем к тегу дочернего компонента событие:
<app-user (onData)="onData($event)"></app-user>
В дочернем компоненте сделайте три кнопки, испускающие различные события. Поймате испущенные события в родительском компоненте.