应该使用@Output()装饰器将事件从子组件暴露到父组件。下面是一个示例代码:
子组件:
import { Component, EventEmitter, Output } from '@angular/core';
@Component({
selector: 'child-component',
template: `
`
})
export class ChildComponent {
@Output() buttonClicked = new EventEmitter();
onClick() {
this.buttonClicked.emit('Hello from child component');
}
}
父组件:
import { Component } from '@angular/core';
@Component({
selector: 'parent-component',
template: `
{{ message }}
`
})
export class ParentComponent {
message: string;
onButtonClicked(message: string) {
this.message = message;
}
}
在子组件中,我们定义了一个名为“buttonClicked”的输出属性,并在点击事件中使用emit函数将数据从子组件发出。
在父组件中,我通过在子组件标签上使用“(buttonClicked)”来订阅该事件,这个时间会调用“onButtonClicked”函数,并将子组件发出的数据作为参数传递。
最后,在父组件的模板中,我们可以访问存储在父组件中的返回数据,进而展示在页面中。