[英]Hide on click Outside of element angular 4
I created a side menu for my vertical navigation, so I toggle the side-menu on click. 我为我的垂直导航创建了一个侧边菜单,所以我在点击时切换侧边菜单。 I need to close that menu on click anywhere outside that menu.
我需要在菜单外的任何地方点击该菜单。 I tried installing :
我试过安装:
https://github.com/chliebel/angular2-click-outside https://github.com/chliebel/angular2-click-outside
But it doesn't work for some reason, I run npm install
, add the 但它由于某种原因不起作用,我运行
npm install
,添加
(clickOutside)="close()"
to my component or side menu wrapper and nothing happens. 到我的组件或侧面菜单包装器,没有任何反应。
Any help please? 有什么帮助吗? The directive code:
指令代码:
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);
}
}
}
I have not used that library but as a workaround without the library what you can do is attach a click event handler on your SideBar component and toggle the showFlag of sidebar. 我没有使用该库,但作为没有库的解决方法,您可以在SideBar组件上附加单击事件处理程序并切换侧栏的showFlag。 And in the sidebar can have *ngIf with that flag type like
并且在侧边栏中可以有* 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();
}
}
That package doesn't support Angular 4. There is an updated package https://www.npmjs.com/package/ng-click-outside for Angular 4+. 该软件包不支持Angular 4. Angular 4+有一个更新的软件包https://www.npmjs.com/package/ng-click-outside 。
I can confirm that package works in Angular 5. 我可以确认该包在Angular 5中有效。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.