角度封装和点击外部指令答案

【问题标题】：Angular encapsulation and click-outside directive角度封装和点击外部指令
【发布时间】：2018-09-18 22:11:34
【问题描述】：

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

我创建了一个指令 (Something like found on this) 来检查单击是否绑定在我的元素之外，但是当用户完全单击侧边栏上我的字体真棒图标时，它被认为是外部单击并且菜单未打开 (该指令效果很好，我点击按钮填充检查它）...

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

我的代码：

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

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

【问题讨论】：

body 上的事件监听器？？？
嗯，我会检查将文档更改为正文是否有效。 @Edit 不起作用...我将在文档上保留侦听器，所以

标签： angular angular5 angular6 encapsulation

【解决方案1】：

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

fa-icon {
  pointer-events: none;
}

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

请参阅this stackblitz 以获取演示。

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

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

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

请参阅this stackblitz 以获取演示。

【讨论】：

非常感谢；D。添加您的 css 规则后，这很容易解决。

【解决方案2】：

您需要更正 onClick 函数的参数，应该是这样的：

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

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

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

【讨论】：