Як надіслати подію з дочірнього компонента батьківському?
Щоб надіслати подію з дочірнього компонента батьківському в Angular, використовується комбінація @Output() і EventEmitter.
Покроково
- У дочірньому компоненті:
- Створюєте властивість з
@Output()типуEventEmitter. - Викликаєте
.emit()за потрібної події.
typescript
@Component({
selector: 'app-child',
template: `<button (click)="sendMessage()">Натисни мене</button>`
})
export class ChildComponent {
@Output() clicked = new EventEmitter<string>();
sendMessage() {
this.clicked.emit('Привіт від дочірнього компонента!');
}
}- У батьківському компоненті:
- Підписуєтеся на подію через
(eventName)у шаблоні. - Обробляєте дані, отримані від дочірнього компонента.
typescript
@Component({
selector: 'app-parent',
template: `<app-child (clicked)="handleClick($event)"></app-child>`
})
export class ParentComponent {
handleClick(message: string) {
console.log(message); // "Привіт від дочірнього компонента!"
}
}Висновок: дочірній компонент використовує
EventEmitter.emit(), батьківський підписується через(eventName)і отримує дані.
Коротка відповідь
Для співбесідиPremium
Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.