为什么 Angular 2 中的自定义组件的 click() 函数会触发两次？

Question

我的自定义组件的

click()

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

这是我的Plunker。

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

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

*ngIf

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

*ngIf

替换为

[hidden]

（显示：无；）。

Answer 4

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

模板

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

班级

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

Answer 5

尝试：

event.preventDefault();

而不是：

event.stopPropagation();