為什么單擊功能會為 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

您的問題是您在父組件和子組件中調用 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

嘗試：

event.preventDefault();

代替：

event.stopPropagation();