如何通过单击外部来隐藏 div？

Question

我知道 jQuery 上有很多这样的解决方案。但到目前为止，我无法在 Angular 的帮助下为自己调整这些解决方案。我有一个 isOpenSharedLinkDiv 变量，它使用 * ngIf 来显示或隐藏一个 div。当我单击此 div 外部时，我尝试将此值转换为 false，但在这种情况下，div 根本没有打开。我想我错过了什么。

test() {
    console.log(this.isOpenSharedLinkDiv);
    // const div = document.querySelector('#sharing-basket-div');
    const div = document.querySelector('.page');
    // const icon = document.querySelector('#sharing-basket-icon');
    const shareDiv = document.querySelector('#share');

    div.addEventListener('click', ev => {
      if (ev.target !== shareDiv || ev.target === div && this.isOpenSharedLinkDiv === true) {
        // this.isOpenSharedLinkDiv = false;
        console.log(ev.target);
        console.log(this.isOpenSharedLinkDiv);
      } else {
        return;
      }
    });
  }

结果，这个变量被证明是假的，即使它还没有打开。

Answer 1

你可以使用一个非常简单的指令来做到这一点：

import { Directive, ElementRef, HostListener, Input, Output, EventEmitter } from '@angular/core';

@Directive({
  selector: '[clickOutside]'
})
export class UnoClickOutsideDirective {
  constructor(private elementRef: ElementRef) {}

  @Output() clickOutside: EventEmitter<null> = new EventEmitter<null>();

  @HostListener('document:click', ['$event.target']) onMouseEnter(targetElement) {
    const clickedInside = this.elementRef.nativeElement.contains(targetElement);
    if (!clickedInside) {
      this.clickOutside.emit(null);
    }
  }
}

此指令适用于任何元素，当您在其外部单击时会告诉您。所以你可以将它与这样的 div 一起使用：

component.html

<div *ngIf="condition" (clickOutside)="condition=false"></div>

component.ts

condition: boolean = true;