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中的自定义事件系统。当点击子组件中的按钮时,会触发自定义事件,并在父组件中显示相应的消息。