我创建了一个使用Angular6捕获元素外部单击的指令,如下所示。
import { Directive, Output, HostListener, EventEmitter, ElementRef } from '@angular/core';
@Directive({
selector: '[appOutsideclick]'
})
export class OutsideclickDirective {
@Output() outsideclick = new EventEmitter();
constructor(public eRef: ElementRef) { }
@HostListener('document:click', ['$event'])
clickout(event) {
if (this.eRef.nativeElement.contains(event.target) === false) {
this.outsideclick.emit(event);
}
}
}
它运行良好,除非我们在容器内部使用*ngIf
隐藏了一个元素,如果我们点击它显示它将触发事件。
<div appOutsideclick (outsideclick)="someFunction1()">
<span *ngIf="showMe" click="someFunction2()">This element shown after ng init based on a condition </span>
This text is alwaise shown
</div>
如果我们点击span元素,它会触发outsideclick
事件。怎么可能解决这个问题?
注意:我知道在这个例子中,它可以使用[hidden]="!showMe"
工作,但这只是一个容易理解问题的例子。我的HTML很复杂,包含来自节点模块的组件,所以我无法应用hidden
everywere
真的不理想,但应该工作。您可以考虑使用id或类而不是tagName来过滤掉元素。
@HostListener('document:click', ['$event'])
clickout(event) {
if (
this.eRef.nativeElement.contains(event.target) === false
&& event.target.tagName !== 'SPAN'
) {
this.outsideclick.emit(event);
}
}