自定义组件绑定点击事件的触发问题

我自定义了一个按钮组件:

// app-button
<button [disabled]="disabled"  (click)="handleClick($event)">click me</button>

handleClick($event: Event) {
        $event.stopPropagation();
        console.log('click event  - button', $event);
 }

我在测试页面中引入这个组件

<app-button disabled="true" (click)="handleBtnClick($e)"></app-button>

handleBtnClick($event: Event) {
        console.log('click event - app-button  ', $event);
 }

此时,我设置了disabled,那么app-button的button标签的click事件没有被触发,这里是没问题的,但是由于自定义组件的button标签(click)没触发,而<app-button>的(click)却被触发了。

个人觉得可能是click事件在<app-button>标签上和<button>标签上都绑定了,那么这时候导致click在button没触发,在app-button促发了。

所以想问问,有没有什么方法可以规避这个问题?或如何解决?

另外: 我在webstrom上遇到这个错误:ng: Expected the operants to be of similar type or any。 但是我的代码却能够正常运行,只是在ide上报这个错误,请问如何解决?

整体思路是错的。
click是原生事件,直接绑定到组件,所以你在<app-button>上绑定的click只属于<app-button>自己,与你底层自己封装的东西无关。
自定义组件在传递事件的时候用自己定义的事件名,别跟原生事件搞起来,把自己搞混淆了。

我觉得是这样的:
首先,监听自定义组件的事件,需要自定义组件实例化一个EventEmitter对象。
然后,在自定义组件内部监听原生dom事件。
再然后,在监听原生dom事件处理函数中,用实例化后的EventEmitter对象emit一个自定义事件。
最后,在父组件中监听子组件emit出的自定义事件。

@flowerswilt 是的,完全正确!

登录后回复

与 Angular开发者 的连接断开,我们正在尝试重连,请耐心等待