條件HTML元素外部的點擊檢測-Angular 6

Question

我有一個自定義選擇，有條件地出現在DOM中。 我試圖檢測用戶在元素外部單擊並從DOM中刪除該元素。 更好的是，我向您展示似乎是什么問題

HTML

 <div class="worker-info">
        <div (click)="showWorkersSelect = !showWorkersSelect" class="worker-name">
            <fa-icon [icon]="['fal', 'user-circle']" size="1x"></fa-icon>
            Worker name: <span>Anna</span>
            <fa-icon  class="select-worker-icon" [icon]="['fal', 'caret-down']" size="1x"></fa-icon>
        </div>

        <div #workerSelection @showWorkersSelect *ngIf="showWorkersSelect" class="select-worker-menu">
            <div  (click)="showWorkersSelect = !showWorkersSelect" class="select-worker-menu__worker-name">
              Essti
            </div>
            <div  (click)="showWorkersSelect = !showWorkersSelect"class="select-worker-menu__worker-name">
               Ilana
            </div>
        </div>
    </div>

因此，當用戶單擊此處時

 <div (click)="showWorkersSelect = !showWorkersSelect" class="worker-name">

showWorkersSelect變為true ，並且選擇生效。

TS

  @ViewChild('workerSelection') workerSelection: ElementRef
  public showWorkersSelect = false

      @HostListener('document:click', ['$event', '$event.target'])
      onClick(event: MouseEvent, targetElement: HTMLElement): void {
        if (this.showWorkersSelect) {
          if (!targetElement) {
            return;
          }
          const clickedInside = this.workerSelection.nativeElement.contains(targetElement);
          if (!clickedInside) {
              this.showWorkersSelect = false;
          }
        }
      }

在這里，我只想在顯示選擇內容時運行該方法，並在用戶單擊外部后將其關閉，但是將其打開后立即將其關閉的方法

Answer 1

如果您的工人選擇的z-index> 0，則可以在z-index介於0和工人選擇的z-index之間的范圍內使用“ div”，它覆蓋了整個屏幕

<div class="backscreen" *ngIf="showWorkersSelect" (click)="showWorkersSelect=false">

.backscreen {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040; //<--use a z-index between 0 and z-index of selectWorker
    background-color: transparent;
}