组件渲染后防止回流/重绘- ngFor - Angular 8

Question

我在我的一个角度组件中有ngFor循环。总共有8个项目(对象)。该对象如下所示：

{
    id: 3,
    name:'abcdef',
    img_one_src:'assets/img/default.svg',
    img_two_src:'assets/img/hover.svg',
    img_three_src:'assets/img/selected.svg',
    form_control_name: 'abcdef',
    inactive: false,
    hover: true,
    active: true
}

简而言之，我动态地填充表单字段和单选按钮的(默认、悬停、选中)状态。

问题是当我滚动得很快或者真的很快的时候，我看到了白色的空白页面，因为发生了重新绘制。

我有3个函数：

mouseEnter(item_id : number, type: string) {
   //I have forloop here 
}

mouseLeave(item_id : number, type: string) {
   //I have forloop here 
}

click(item_id : number, type: string) {
   //I have forloop here 
}

如何防止组件加载后重新绘制？我希望避免在滚动页面时重新绘制，并将ngFor再次带到视图中。

我不确定是循环，还是图像，还是与CSS有关？

Answer 1

默认情况下，Angular使用ChangeDetectionStrategy.Default更改检测策略。默认策略并不假定应用程序有任何变化，因此，每当应用程序中发生变化时，由于各种用户事件、计时器、XHR、promises等的影响，变化检测将在所有组件上运行。

要解决此问题，您可以将检测策略更改为使用ChangeDetectionStrategy.OnPush。这告诉Angular组件只依赖于它的@Input()。

因此，它将仅在@Input()发生更改时运行更改检测。