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

Question

我的自定义组件click功能被触发了两次 - 自定义组件的事件和样本级别事件都被触发。

这是我的 Plunker：

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

Answer 1

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

模板：

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

班级：

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

Answer 2

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

模板

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

班级

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

Answer 3

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

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

和这里：

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

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

Answer 4

尝试：

event.preventDefault();

代替：

event.stopPropagation();