我知道 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;
}
});
}
结果,这个变量被证明是假的,即使它还没有打开。
最佳答案
你可以使用一个非常简单的指令来做到这一点:
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;
关于javascript - 如何通过单击外部来隐藏 div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56126808/