时间戳

首页 > 解决方案 > 错误元素Angular 6上的外部点击指令触发事件

angular - 错误元素Angular 6上的外部点击指令触发事件

问题描述

我创建了一个指令，用于使用 Angular6 捕获元素的外部点击，如下所示。

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

@Directive({
  selector: '[appOutsideclick]'
})
export class OutsideclickDirective {
  @Output() outsideclick = new EventEmitter();
  constructor(public eRef: ElementRef) { }
  @HostListener('document:click', ['$event'])
  clickout(event) {
    if (this.eRef.nativeElement.contains(event.target) === false) {
      this.outsideclick.emit(event);
    }
  }
}

它运行良好，除非我们在容器内有一个隐藏的元素，*ngIf并且如果我们在显示时单击它会触发事件。

    <div appOutsideclick (outsideclick)="someFunction1()">
      <span *ngIf="showMe" click="someFunction2()">This element shown after ng init based on a condition </span> 
This text is alwaise shown
    </div>

如果我们单击 span 元素，它会触发outsideclick事件。如何解决这个问题？

注意： 我知道在这个例子中，它可以使用[hidden]="!showMe"，但这只是一个便于理解问题的例子。我的 html 很复杂并且包含来自节点模块的组件，所以我不能应用hiddeneverywere

标签： angularangular6directive

解决方案

真的不理想，但应该工作。您可以考虑使用 id 或 class 而不是 tagName 来过滤掉元素。

@HostListener('document:click', ['$event'])
  clickout(event) {
    if (
      this.eRef.nativeElement.contains(event.target) === false
      && event.target.tagName !== 'SPAN'
    ) {
      this.outsideclick.emit(event);
    }
  }

推荐阅读