Question

问题：：如果用户在侧边栏之外单击，我需要添加一种方法来绑定并关闭侧边栏菜单。

我已经创建了一条指令（某事like found on this），该指令检查click是否绑定在元素之外，但是当用户完全单击侧边栏上我的字体真棒图标时，就被认为是外部单击，菜单不是打开（该指令有效，我点击了按钮填充检查了它）...

我想这是我的指令中的一个问题，它是由角度封装引起的...

我的代码：

<aside [ngClass]="{'open': menuStatus}" (clickOutside)="menuStatus = false">
    <button (click)="menuStatusToggle()">
        <fa-icon [icon]="['fas', 'bars']" *ngIf="!menuStatus"></fa-icon>
        <fa-icon [icon]="['fas', 'times']" *ngIf="menuStatus"></fa-icon>
    </button>
    (Menu Content...)
</aside>

绑定事件：

@HostListener('document:click', ['$event.target'])
  public onClick(targetElement) {

    // Variable content always false when click on icon of _elementRef
    const clickedInside = this._elementRef.nativeElement.contains(targetElement);

    if (!clickedInside) {
      this.clickOutside.emit(null);
    }
  }

有人有建议吗？封装真的有问题吗？

Answer 1

要确保字体真棒图标不会捕获click事件，请在组件CSS中定义以下样式：

$(document).ready(function(){$(body).addClass('js')})

使用该样式属性，按钮会收到click事件，然后可以对其进行正确处理。

有关演示，请参见this stackblitz。

另一种解决方案是处理主机元素上的click事件，并停止传播。结果，到达文档的所有单击事件都在宿主元素之外：

fa-icon {
  pointer-events: none;
}

有关演示，请参见this stackblitz。

Answer 2

您需要对onClick函数上的参数进行更正，应该像这样：

@HostListener('document:click', ['$event.target'])
public onClick(event) {

  const clickedInside = this._elementRef.nativeElement.contains(event.target);

  if (!clickedInside) {
    this.clickOutside.emit(null);
  }
}

角封装和外部点击指令

2 个答案: