仅在调用组件时实现@hostListener

Question

Angular 使用 ngx-datatable 的应用程序。此 table 自动填充其 [rows]。在这些行中有一个 [action] 显示项目的弹出窗口。此弹出窗口是一个独立于 table 的组件。我正在从父>子link中的table调用弹出窗口，例如

<ngx-datatable-column name="Actions">
<ng-template let-row="row" ngx-datatable-cell-template>
    <app-actions-pop-up [actions]="row.actions"></app-actions-pop-up>
</ng-template>
</ngx-datatable-column>

这调用了动作弹出组件。我有一个 @HostListener 可以监听 Event 页面上的点击。然后 returns true/false 打开或关闭弹出窗口。

这是昂贵的，因为我的应用程序将有 1000 行，并且它会影响呈现，因为无论是否单击操作按钮，都会收听点击。

例如如果有 4 行项目，它将循环 4 次。想象一下，如果有 1000 行。

这里有一个很好的解决方案：它在弹出组件内只向文档单击事件添加一次 @Hostlistener()。该事件应将单击的目标元素的值推送到存储在全局实用程序服务中的 public 主题中。

但是，到目前为止，我一直在努力在我的设置中实现这一点。如有任何帮助，我们将不胜感激 - stackBlitz example

Answer 1

我建议只在弹出容器中添加 (document:click)="clickout($event)"。

html

<div *ngIf="isActive" (document:click)="clickout($event)" class="actions__container">

ts

clickout(event) {
  this.isActive = this.eRef.nativeElement.contains(event.target);
}

Angular 将仅在弹出窗口打开时订阅该事件，并在弹出窗口关闭时取消订阅。所以您将有零个或只有一个订阅。

您还可以阅读我关于此优化的一篇文章

Simple Angular context help component or how global event listener can affect your perfomance

Forked Stackblitz

仅在调用组件时实现@hostListener

Implementing a @hostListener only when component is called

javascript

angular

rxjs

ngx-bootstrap

ngx-datatable