在錯誤的元素Angular 6上點擊指令fire event

Question

我創建了一個使用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隱藏的*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很復雜，包含來自節點模塊的組件，所以我不能應用hidden每一個

Answer 1

真的不理想，但應該工作。 您可以考慮使用id或類而不是tagName來過濾掉元素。

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