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>

此元素显示在基于条件的ng init之后
此文本已显示

如果我们单击span元素，它将触发

outsideclick

事件。如何解决此问题

注意：

---

我知道在这个示例中，使用

[hidden]=“！showMe”

可以使工作变得更有效，但这只是一个易于理解问题的示例。我的html很复杂，包含来自节点模块的组件，因此我无法应用

hidden

everywere

确实不理想，但应该可以工作。可以考虑使用ID或类而不是TAGNEY来筛选该元素。

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