Angular8-[ngclass]性能问题

Question

我正在使用[ngClass]根据物料表行值选择CSS类。在鼠标悬停事件上，我正在更改获取cssclass且运行正常的标志值。但是，当我调试它时，我意识到它会在后台连续检查getIconCssClass创建后台线程和镶边，这可能会导致性能问题。如何解决？

HTML

<mat-icon [ngClass]="getIconCssClass(element)" mouseOver="mouseOverCss(element)" mouseOutCss(element) ></mat-icon>

。ts

getIconCssClass(element: Object){
if(element.void && !element.mouseOver){
   return 'void-icon-normal-css';
} else if(element.v)
   return 'void-icon-mouseover-css';
}

mouseOverCss(element)
{
  element.mouseOver = true;
}

mouseOutCss(element)
{
  element.mouseOver = false;
}

Answer 1

我只是从[ngClass]中删除方法，并在对象元素中添加了属性。默认<< cssClass根据渲染垫表之前的条件添加。

HTML

<mat-icon [ngClass]="element.cssClass" mouseOver="mouseOverCss(element)" mouseOutCss(element) ></mat-icon>

只需在鼠标悬停事件上更改
cssclass

，而不更改任何标志。

。TS

mouseOverCss(element)
{
  element.cssClass= 'void-icon-mouseover-css';
}

mouseOutCss(element)
{
  element.mouseOver = 'void-icon-normal-css';
}

经过一些解决后，我发现当我们在
[ngClass]

方法的条件下使用任何标志时，会比用角创建后台进程来对方法进行连续检查。我们应该始终避免在mouseOverCss方法中更改布尔值标志（例如mouseOver），或者避免使用方法本身来提高性能。