Question

我知道jQuery上有许多这样的解决方案。但是到目前为止，我无法在Angular的帮助下适应这些解决方案。我有一个使用* ngIf来显示或隐藏div的isOpenSharedLinkDiv变量。当我在该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;
      }
    });
  }

结果，即使尚未打开该变量，结果仍为false。

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;

如何在外部单击以隐藏div？

1 个答案: