Question

我为我的垂直导航创建了一个侧边菜单，所以我在点击时切换侧边菜单。我需要在菜单外的任何地方点击该菜单。我试过安装：

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);
        }
    }
}

Answer 1

我没有使用过该库，但作为没有库的解决方法，您可以在SideBar组件上附加一个click事件处理程序并切换侧栏的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();
 }
}

Answer 2

该软件包不支持Angular 4. Angular 4 +有一个更新的软件包https://www.npmjs.com/package/ng-click-outside。

我可以确认该程序包在Angular 5中有效。

单击隐藏在元素角4的外部

2 个答案: