在Angular 7中,父组件可以通过在模板中使用事件绑定来监听子组件触发的事件。以下是一个示例代码,演示了如何在父组件中监听子组件的事件:
在子组件中,定义一个带有@Output装饰器的事件,并在需要触发该事件的地方调用它:
import { Component, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'child-component',
template: `
`
})
export class ChildComponent {
@Output() eventClicked = new EventEmitter();
onButtonClick() {
this.eventClicked.emit();
}
}
在父组件的模板中,使用事件绑定语法来监听子组件的事件并调用一个方法:
import { Component } from '@angular/core';
@Component({
selector: 'parent-component',
template: `
`
})
export class ParentComponent {
onEventClicked() {
console.log('子组件触发了事件');
}
}
在这个例子中,当子组件的按钮被点击时,它会触发eventClicked
事件。父组件监听该事件,并在调用onEventClicked()
方法时打印一条消息。
这就是在Angular 7中在父组件上监听子组件事件的解决方法。