为什么单击功能会在 Angular 2 中为自定义组件触发两次答案

【问题标题】：Why click function triggers twice for custom component in Angular 2为什么单击功能会在 Angular 2 中为自定义组件触发两次
【发布时间】：2017-06-26 00:04:20
【问题描述】：

我的自定义组件click函数被触发了两次——自定义组件的事件和样本级事件都被触发了。

这是我的 Plunker：

https://plnkr.co/edit/wp2iWh7OStdPm5uXsWbP?p=preview

【问题讨论】：

标签： angular mouseevent angular2-custom-component

【解决方案1】：

我相信：添加发射也可以解决它

模板

<div (click)="divClick($event)">Custom Div Clcik here!</div>

类

@Output()
divClick = new EventEmitter<any>().emit;

【讨论】：

【解决方案2】：

试试：

event.preventDefault();

代替：

event.stopPropagation();

【讨论】：

【解决方案3】：

您的问题是您在父组件和子组件中调用 click() 事件：这里：

<cus-div (click)="onClick()"></cus-div>

这里：

<div (click)="divClick()">Custom Div Clcik here!</div>

删除你的点击事件<cus-div></cus-div>上的点击事件，它会触发一次

【讨论】：

【解决方案4】：

因为你在子组件和父组件上绑定了两次。 mouseEvent 默认从子组件传播到父组件。您可以停止将事件传播到父组件。

模板：

<div (click)="divClick($event)">Custom Div Clcik here!</div>

类：

divClick(event) {
    event.stopPropagation();
    alert("divClick");
}

【讨论】：