在Angular中,可以使用@Output()
装饰器和EventEmitter
类来从子组件向父组件发射事件。以下是一个示例:
在子组件中,定义一个@Output()
装饰器的属性,并创建一个新的EventEmitter
实例。然后,在子组件的某个事件发生时,使用emit()
方法来发射事件。
import { Component, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'child-component',
template: `
`
})
export class ChildComponent {
@Output() myEvent = new EventEmitter();
emitEvent() {
this.myEvent.emit('事件数据');
}
}
在父组件中,使用子组件的标签,并订阅子组件发射的事件。当事件被发射时,触发回调函数并获取传递的数据。
import { Component } from '@angular/core';
@Component({
selector: 'parent-component',
template: `
接收到的数据: {{ eventData }}
`
})
export class ParentComponent {
eventData: string;
handleEvent(data: string) {
this.eventData = data;
}
}
在父组件的模板中,使用子组件的标签,并在myEvent
事件上绑定一个处理函数handleEvent()
。该处理函数将子组件发射的数据赋值给eventData
属性。
这样,在子组件中点击“发射事件”按钮时,父组件将接收到子组件发射的事件,并更新eventData
属性的值,最终在模板中显示出来。
请注意,父组件必须在模板中引入子组件,并在父组件的模板中使用子组件的标签。