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