我为垂直导航创建了一个侧面菜单,因此我在单击时切换侧面菜单。我需要在单击该菜单之外的任何位置时关闭该菜单。我尝试安装:
https://github.com/chliebel/angular2-click-outside
但由于某种原因它不起作用,我跑了npm install
,添加
(clickOutside)="close()"
到我的组件或侧面菜单包装器,什么也没有发生。
有什么帮助吗?指令代码:
import {Directive, ElementRef, Output, EventEmitter, HostListener} from '@angular/core';
@Directive({
selector: '[clickOutside]'
})
export class ClickOutsideDirective {
constructor(private _elementRef: ElementRef) {
}
@Output()
public clickOutside = new EventEmitter<MouseEvent>();
@HostListener('document:click', ['$event', '$event.target'])
public onClick(event: MouseEvent, targetElement: HTMLElement): void {
if (!targetElement) {
return;
}
const clickedInside = this._elementRef.nativeElement.contains(targetElement);
if (!clickedInside) {
this.clickOutside.emit(event);
}
}
}
我没有使用该库,但作为没有该库的解决方法,您可以做的就是在 SideBar 组件上附加一个单击事件处理程序并切换侧边栏的 showFlag。在侧边栏中可以有 *ngIf 与该标志类型,例如
@Component({
host: {
'(document:click)': 'onClick($event)',
},
})
class SidebarComponent() {
constructor(private _el: ElementRef) { }
onClick(event) {
if (!this._el.nativeElement.contains(event.target)) // similar checks
resetShowFlagSidebar();
}
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)