Angular中的自定义事件系统可以通过使用@Output()
装饰器和EventEmitter
类来实现。以下是一个示例解决方法:
import { Component, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-child',
template: `
`
})
export class ChildComponent {
@Output() customEvent = new EventEmitter();
onClick() {
this.customEvent.emit('自定义事件已触发');
}
}
在上面的代码中,我们使用了@Output()
装饰器来将customEvent
属性标记为输出属性,并创建了一个新的EventEmitter
实例。
import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
template: `
{{ message }}
`
})
export class ParentComponent {
message: string;
onCustomEvent(event: string) {
this.message = event;
}
}
在上面的代码中,我们在app-child
组件上使用(customEvent)
来监听customEvent
自定义事件,并调用onCustomEvent
方法来处理事件。
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
`
})
export class AppComponent {}
在上面的代码中,我们声明了根组件AppComponent
,在模板中使用
来引入父组件。
通过以上步骤,我们就实现了Angular中的自定义事件系统。当点击子组件中的按钮时,会触发自定义事件,并在父组件中显示相应的消息。