Angular encapsulation和click-outside指令

Question

问题：如果用户在外面点击，我需要添加绑定和关闭侧边栏菜单的方法。

我创建了一个指令（Something like found on this）来检查click是否绑定在我的元素之外，但是当用户完全点击侧边栏上的font-awesome图标时，它被认为是外部点击并且菜单没有打开（该指令运行良好） ，我点击按钮填充检查它...）

我想这是由角度封装引起的我的指令的问题......

我的代码：

<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

要确保font-awesome图标不会捕获click事件，请在组件CSS中定义以下样式：

fa-icon {
  pointer-events: none;
}

使用该样式属性，该按钮将接收单击事件，然后可以正确处理该事件。

有关演示，请参阅this stackblitz。

---

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

@HostListener('click', ['$event'])
public onHostClick(event: Event) {
  event.stopPropagation();
}

@HostListener('document:click', ['$event'])
public onDocumentClick(event: Event) {
  this.clickOutside.emit(null);
}

有关演示，请参阅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);
  }
}