我将 Angular 从 4 升级到 6,因此我的点击策略出现了问题,它停止在所有组件上工作。
我的指令:
import { Directive, Output, EventEmitter, ElementRef, 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);
}
}
}
我的 component.html 使用了这个指令:
<div
id="sidenav"
*ngIf="this.opened"
class="sidenav"
[ngClass]="getClasses()"
[ngStyle]="getStyles()"
clickOutside
(clickOutside)="closeOutsideSidenav()"
>
<header> {{ navTitle }} </header>
<i
*ngIf="this.showCloseButton"
class="iconic iconic-x-thin close-icon"
(click)="closeSidenav()"
></i>
<ng-content></ng-content>
</div>
<div
*ngIf="this.backdrop && this.opened"
class="sidenav-backdrop"
></div>
view:
<div #insideElement></div>
成分:
export class SomeClass {
@ViewChild("insideElement") insideElement;
@HostListener('document:click', ['$event.target'])
public onClick(targetElement) {
const clickedInside = this.insideElement.nativeElement.contains(targetElement);
if (!clickedInside) {
console.log('outside clicked');
}
}
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)