为什么 Angular 2 中自定义组件的点击函数会触发两次

Question

我的自定义组件

click

函数被触发两次 - 自定义组件的事件和示例级别事件都被触发。

这是我的笨蛋：

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

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

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

这里：

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

删除你的点击事件的

<cus-div></cus-div>

上的点击事件，它将触发一次

Answer 3

我的信念是：添加发射也可以解决它

模板

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

班级

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

Answer 4

我有一个类似的问题，我找到了适合我的解决方案，我有两个

*ngIf

，一个被否定，在我的情况下交换图标。我将

*ngIf

替换为

[hidden]

（显示：无；）。

Answer 5

尝试：

event.preventDefault();

而不是：

event.stopPropagation();