Question

我有一个用label标签包装的div元素。标签标签有复选框元素。当我从我的指令（通过hostListener）获得click事件值时，我的指令在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

问题是当你点击＆＃34;测试数据＆＃34;时，这会触发指令点击事件（第一次指令点击）。此文本是标签的一部分。单击标签时，＆＃34;中指定的项目为＆＃34;将单击标记（第二次指令单击）。

为防止双重触发，您应该从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上调用两次

1 个答案: