在Angular 7中,使用EventEmitter来在点击事件上触发自定义事件可能无效。这是因为在Angular 7中,点击事件的默认行为已经被禁用。为了使EventEmitter正常工作,你需要手动启用点击事件的默认行为。
以下是一个示例代码,演示如何在Angular 7中使用EventEmitter来处理点击事件:
在组件的HTML模板中,添加一个按钮,并使用(click)指令来绑定点击事件:
在组件的TypeScript文件中,导入EventEmitter和Output,并创建一个用于处理点击事件的方法。在该方法中,使用EventEmitter的emit方法来触发自定义事件:
import { Component, EventEmitter, Output } from '@angular/core';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent {
@Output() myEvent = new EventEmitter();
onClick() {
this.myEvent.emit();
}
}
在父组件的HTML模板中,使用自定义事件的语法来监听并处理事件:
在父组件的TypeScript文件中,创建一个用于处理自定义事件的方法:
handleEvent() {
console.log('点击事件已触发');
}
这样,当我们点击按钮时,点击事件会触发,并且自定义事件会被发射,最终在父组件中处理该事件。
希望以上解决方法能够帮助您解决问题!