如何在Angular中单击外部时关闭元素？答案

【问题标题】：How to close an element on clicking outside in Angular?如何在Angular中单击外部时关闭元素？
【发布时间】：2020-07-27 12:11:13
【问题描述】：

我使用Popper js 显示工具提示，我在单击按钮后显示。

我在页面上多次使用这个元素（带有工具提示的按钮）。现在我尝试在元素外部单击时关闭元素。

这不能正常工作，在元素外部单击时会显示所有其他弹出窗口。

我只想关闭打开的工具提示。我为此创建了一个指令，还使用了ng-click-outside 包。

我不能让这个工作。有一些类似的问题，但仍然没有解决方案。

我的按钮和弹出代码：

<button 
    *ngIf="popupText"
    type="button" 
    id="i-button-{{element.id}}"
    class="i-button"
    [ngClass]="{'active': showPopper}"
    (click)="toggle()">
</button>

<div 
    *ngIf="popupText"
    id="popper-{{id}}"
    [ngClass]="{'active': showPopper}"
    class="i-text-popper"
    [hidden]="!showPopper"
    (clickOutside)="toggle()" 
    [delayClickOutsideInit]="true"
    [attachOutsideOnClick]="true" >
        <p class="popper-content" [innerHTML]="popupText"></p>
        <span class="popper-close close-icon" (click)="toggle()"></span>
</div>

切换功能：

toggle() {
    this.popper.update();
    this.showPopper = !this.showPopper;
}

clickOutside 指令：

import {
    Directive,
    ElementRef,
    EventEmitter,
    Output,
    HostListener
  } from '@angular/core';
  
  @Directive({
    selector: '[clickOutside]',
  })
  export class ClickOutsideDirective {
    @Output('onClickOutside') onClickOutside = new EventEmitter<MouseEvent>();
  
    constructor(private _eref: ElementRef) {}
  
    @HostListener('document:click', ['$event', '$event.target'])
    onDocumentClicked(event: MouseEvent, targetElement: HTMLElement) {
      if (targetElement && document.body.contains(targetElement) && !this._eref.nativeElement.contains(targetElement)) {
        this.onClickOutside.emit(event);
      }
    }
  }

也尝试使用https://www.npmjs.com/package/ng-click-outside 但是仍然不可能只关闭处于活动状态的元素而不是显示/关闭所有按钮。

如何只关闭在元素外部单击时处于活动状态的工具提示？

【问题讨论】：

标签： angular typescript angular-directive popper.js

【解决方案1】：

找到了解决方案，但仍不是 100% 正确。

<button 
    *ngIf="popupText"
    type="button" 
    id="i-button-{{element.id}}"
    class="i-button"
    [ngClass]="{'active': showPopper}"
    (click)="toggle($event)">
</button>

<div 
    *ngIf="popupText"
    id="popper-{{id}}"
    class="i-text-popper"
    [hidden]="!showPopper"
    (click)="$event.stopPropagation()" >
        <p class="popper-content" [innerHTML]="popupText"></p>
        <span class="popper-close close-icon" (click)="toggle($event)"></span>
</div>

切换功能：

toggle($event:any) {
   this.popper.update();
   $event.stopPropagation();
   this.showPopper = !this.showPopper;
}

@HostListener('document:click', ['$event']) onDocumentClick($event:any) {
  this.showPopper = false;
}

现在在元素外部单击时会关闭正确的元素。但现在的问题是，当有一个弹出窗口打开并且我再次单击一个新按钮时，它将显示两个弹出窗口而不是 1。第一个弹出窗口现在不会关闭。

【讨论】：