Question

我正在制作一个Angular应用程序，一切似乎都工作良好。但是我在质疑性能。

所以我尝试实现changedetectionStrategy.OnPush。

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

每次在此列表中单击，都会触发getTooltip事件。当然不需要。点击事件触发更改检测更改。

<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，因为它不会触发更改检测 https://medium.com/@krzysztof.grzybek89/how-runoutsideangular-might-reduce-change-detection-calls-in-your-app-6b4dab6e374d

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

Answer 1

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

可能更好

您可以找到更多here

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

1 个答案: