Angular8 - проблема производительности [ngclass] - PullRequest
Новая
       29

Angular8 - проблема производительности [ngclass]

0 голосов
/ 21 февраля 2020

Я использую [ngClass] , чтобы выбрать css класс на основе значения строки таблицы материала. При наведении мыши на событие я меняю значение флага, которое выбирает cssclass и работает нормально. Но когда я отлаживаю его, я понимаю, что он создает фоновый поток и chrome постоянно проверяет 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;
}

1 Ответ

0 голосов
/ 22 февраля 2020

Я просто удалил метод из [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] метод, отличный от angular создает фоновый процесс для непрерывной проверки метода. мы всегда должны избегать логического флага, например mouseOver , который изменяется в методе mouseOver Css, или избегать самого метода для повышения производительности.

...