要让Angular父组件从子组件接收事件,可以使用@Output装饰器和EventEmitter类。下面是如何将事件从子组件传递到父组件的示例代码:
子组件:
import { Component, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'child-component',
template: `
`
})
export class ChildComponent {
@Output() buttonClick = new EventEmitter();
onButtonClick(): void {
this.buttonClick.emit('子组件按钮点击事件');
}
}
在子组件中,我们创建了一个名为buttonClick的Output属性,并将它和一个新实例化的EventEmitter类相绑定。在onButtonClick()方法中,我们使用emit()方法发送一个字符串给父组件。
父组件:
import { Component } from '@angular/core';
@Component({
selector: 'parent-component',
template: `
父组件: {{ message }}
`
})
export class ParentComponent {
message: string;
onChildButtonClick(event: string): void {
this.message = event;
}
}
在父组件中,我们需要在子组件标签上使用子组件的Output属性来监听事件,并将其绑定到onChildButtonClick()方法。这个方法表示当子组件按钮点击时发生的事件。接着我们将子组件发射的事件($event)传递到onChildButtonClick()方法中,并将其赋值到message变量中。最后,我们将message变量显示到页面上。
这样,当我们在子组件中点击按钮时,它会将消息传递给父组件,并显示在父组件模板中的相应位置。