防止主机侦听器在标签内的 div 上调用两次

Question

我有一个用 label 标记包裹的 div 元素。 Label 标签有复选框元素。当我从我的指令（通过 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>

使用 home 指令点击 div 时的输出：-

enter image description here

Answer 1

问题是当您点击 "Test data" 时，这会触发指令点击事件（第一次指令点击）。此文本是标签的一部分。当您点击标签时，将点击 "for" 标签中指定的项目（第二个指令点击）。

为防止重复触发，您应该将文本从 div 移走。

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

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

防止主机侦听器在标签内的 div 上调用两次

Prevent host listener to call two times on div inside label

html

angular2-directives