Запретить прослушивание хоста два раза на div внутри метки

Question

У меня есть элемент div, завернутый тегом метки. Ярлык имеет элемент флажка. Когда я получаю значение события клика из моей директивы (с помощью hostListener), моя директива называется два раза по одному на div внутри метки и другая для флажка. Как я могу назвать свою директиву ровно один раз.

Моя директива

import { Directive, HostListener } from '@angular/core'; 

@Directive({ 
selector: '[home]' 
}) 
export class HomeDirective { 
@HostListener('click', ['$event.target']) onclick(data: any) { 
    console.log(data); 
} 
} 

Мой HTML,

<div> 
<label for="test"> 
    <div home>test dataa 
    <input type="checkbox" id="test" /> 
    </div> 
</label> 
</div> 

Производительность при нажмите на DIV с домашней директивы: -

enter image description here

Answer 1

Проблема заключается в том, когда вы нажимаете на " Test data ", это инициирует событие click для кликов. Этот текст является частью метки. Когда вы нажимаете на метку, элемент, указанный в теге «для», будет нажат (второй щелчок директивы).

Для предотвращения двойного стрельбы вам необходимо переместить текст из div.

<div> 
<label for="test"> 
    test dataa 
    <div home> 
    <input type="checkbox" id="test" /> 
    </div> 
</label> 
</div> 

http://plnkr.co/edit/TyxkmhLlvKszXYarXXvr?p=preview