javascript - 单击外部 Angular 分量

Question

这个问题在这里已经有了答案:





Detect click outside Angular component

(12 个答案)


5天前关闭。




我知道这方面有无数的问题，我尝试了每一个解决方案，但没有一个适合我的需要。尝试过的指令，直接在我的组件中尝试过，但一次都没有用。

所以我的情况是这样的；我有一个表格 View ，在每个表格 View 的末尾，您可以通过单击图标打开一个小下拉列表。弹出的下拉列表是一个小组件。所以在我的父组件中它看起来像这样；

<tbody>
    <tr *ngFor="let rows of subscriptionTable.data; let i = index;">
        <td *ngFor="let cell of subscriptionTable.data[i].data"> 
            <!-- Table actions -->
            <div *ngIf="cell.actions && cell.actions.length > 0">
                <app-dropdown
                    [actions]         = cell.actions
                    (onActionClicked) = "handleSubscriptionAction($event, i)"
                >
                </app-dropdown>
            </div>
        </td>
    </tr>
</tbody>

所以我正在渲染多个看起来像这样的子应用下拉组件；

<div class="fs-action">
  <div class="fs-action__dots" (click)="openActionSheet($event)">
    <span class="fs-action__dot"></span>
    <span class="fs-action__dot"></span>
    <span class="fs-action__dot"></span>
  </div>

  <ul class="fs-action__list">
    <li 
      class="fs-action__item"
      *ngFor="let action of actions; let i = index;" 
      (click)="actionClicked( $event, i )" 
      [ngClass]="{'fs-action__item--danger': action.type === 'destructive' }"
    >
        {{ action.label }}
    </li>
  </ul>
</div>

我现在想要做的是，只要我在 fs-action 元素之外单击，下拉菜单就会消失。我想在 app-dropdown 中这样做组件，那么与该组件相关的所有内容都在同一个地方。

但只要我附上指令或其他任何东西， hostlistener get 为每一行添加。然后，每个外部点击都会被触发多次。检查我是否在 Action 元素之外单击会成为一种负担，因为它会为所有其他 hostlisteners 呈现 false对于活跃的人来说也是如此。

这个问题在这个 stackblitz 中得到了说明； https://stackblitz.com/edit/angular-xjdmg4

我评论了导致 dropdown.component.ts 内部问题的部分;

  public onClickOutside( event ) {
    // It executes 3 times, for each of the items that is added
    // Even when clicking inside the dropdown, it calls this function
    console.log("click")
  }

Answer 1

只需使用 (click) 事件绑定(bind)，从组件的实例中传递一个函数，就完成了。

解决方案:
声明指令 ClickOutside 如下:

@Directive({
  selector: '[clickOutside]',
})
export class ClickOutsideDirective {
  @Output('onClickOutside') onClickOutside = new EventEmitter<MouseEvent>();

  constructor(private _eref: ElementRef) {}

  @HostListener('document:click', ['$event', '$event.target'])
  onDocumentClicked(event: MouseEvent, targetElement: HTMLElement) {
    if (targetElement && document.body.contains(targetElement) && !this._eref.nativeElement.contains(targetElement)) {
      this.onClickOutside.emit(event);
      }
    }
  }
}

<div clickOutside (onClickOutside)="onClickOutside()">
...
</div>

在一个名为 ng-click-outside 的 npm 模块中有一个指令。

安装 : npm install --save ng-click-outside
阅读以下链接中的完整文档:

ng-click-outside directive