檢測元素外部的點擊 Angular 9 - 多個實例

Question

在我的應用程序中，單擊一個元素時，我會顯示一個包含附加信息的工具提示。 這適用於列表中的所有元素。 我希望能夠在單擊工具提示之外的任何內容時關閉擴展。

這個概念本質上是這個已回答問題所涵蓋的內容，但如果元素有多個實例，我需要它來工作。 我嘗試將 ViewChildren 用於元素而不是 ViewChild，因為有多個元素，但這並沒有達到我想要的效果。 如果可能，我想避免使用@angular/core 、 rxjs等尚未提供的任何軟件包。 請參閱下面的簡化版本，這是我迄今為止沒有成功的嘗試。

HTML

<li *ngFor="let listItem of listItems;">
  <p>
    <span *ngIf="showTooltip" class="item-tooltip" #itemTooltip>
      Tooltip with {{ listItem.detailed }}
      <span (click)="toggleTooltip()">Close</span>
    </span>
    <span (click)="toggleTooltip()" #tooltipTrigger>{{ listItem.blurb }}</span>
  </p>
</li>

TS

@ViewChildren('itemTooltip') itemTooltip: ElementRef;
@ViewChildren('tooltipTrigger') tooltipTrigger: ElementRef;
this.showTooltip = false;

constructor( private renderer: Renderer2) {
  this.renderer.listen('window', 'click', (e: Event) => {
    if (this.showTooltip && e.target !== this.itemTooltip.nativeElement) {
      // never gets to here 
      console.log(‘click detected’);
      this.toggleTooltip();
    }
  });
}

toggleTooltip() {
  const tooltipStatus = this.showTooltip;
  if (tooltipStatus = true) {
    this.showTooltip = false;
  } else if (tooltipStatus = false) {
    this.showTooltip = true;
  }
}

Answer 1

在公共位置創建一個指令以從任何地方訪問，將其添加到模塊也以使用指令

import {Directive, ElementRef, Output, EventEmitter, HostListener} from '@angular/core';
 
@Directive({
    selector: '[clickOutside]'
})
export class ClickOutsideDirective {
    constructor(private _elementRef : ElementRef) {
    }
 
    @Output()
    public clickOutside = new EventEmitter();
 
    @HostListener('document:click', ['$event.target'])
    public onClick(targetElement) {
        const clickedInside = this._elementRef.nativeElement.contains(targetElement);
        if (!clickedInside) {
            this.clickOutside.emit(null);
        }
    }
}

HTML

<li *ngFor="let listItem of listItems;">
  <p>
    <span *ngIf="showTooltip" class="item-tooltip" #itemTooltip>
      Tooltip with {{ listItem.detailed }}
      <span (clickOutside )="closeTooltip()">Close</span>
    </span>
    <span (click)="openTooltip()" #tooltipTrigger>{{ listItem.blurb }}</span>
  </p>
</li>

TS

openTooltip = () => { showTooltip = true; }

clickOutside = () => { showTooltip = false; }