带有primeng OverlayComponent的角度变化检测ngFor

Question

我正在制作一个 Angular 应用程序，一切似乎都运行良好。 但我质疑表现。

所以我尝试实现 changedetectionStrategy.OnPush。

我使用了 primeng 的工具提示和覆盖面板 https://www.primefaces.org/primeng/#/overlaypanel

此列表中的每次单击都会触发 getTooltip 事件。这当然是不需要的。 click 事件触发 changedetection 更改。

<div #actualTarget
     *ngFor="let event of day.TimeEvents"
     class="event"
     pTooltip="{{getTooltip(event)}}"
     tooltipPosition="bottom"
     showDelay="200"
     (click)="openOverlay(op, $event, actualTarget)">

我尝试使用带有自定义指令的 ngZone 在外部运行 click 命令，但这不会显示 overlayPanel，因为它不会触发 changedetection https://medium.com/@krzysztof.grzybek89/how-runoutsideangular-might-reduce-change-detection-calls-in-your-app-6b4dab6e374d

是否可以轻松解决，以便显示覆盖面板，但不会再次为每个 div 元素调用工具提示方法？

Answer 1

您的问题不是更改检测，而是模板内的函数调用。 它将被多次调用pTooltip="{{getTooltip(event)}}"。可能更好地将方法移动到管道pTooltip="{{event | getTooltip}}"

您可以了解更多here