[英]Detect Click Outside of Element Angular 9 - Multiple Instances
在我的应用程序中,单击一个元素时,我会显示一个包含附加信息的工具提示。 这适用于列表中的所有元素。 我希望能够在单击工具提示之外的任何内容时关闭扩展。
这个概念本质上是这个已回答问题所涵盖的内容,但如果元素有多个实例,我需要它来工作。 我尝试将 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;
}
}
在公共位置创建一个指令以从任何地方访问,将其添加到模块也以使用指令
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; }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.