一旦组件被渲染 ngFor - Angular 8，防止回流/重绘答案

【问题标题】：Prevent reflow / repaint once the component is rendered ngFor - Angular 8一旦组件被渲染 ngFor - Angular 8，防止回流/重绘
【发布时间】：2019-08-02 11:32:00
【问题描述】：

我的一个角度组件中有 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 有关？

【问题讨论】：

标签： javascript css angular typescript

【解决方案1】：

默认情况下，Angular 使用ChangeDetectionStrategy.Default 更改检测策略。默认策略不对应用程序进行任何假设，因此每当我们的应用程序发生变化时，由于各种用户事件、计时器、XHR、promise 等，都会在所有组件上运行变化检测。

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

所以它只会在@Input()发生变化时运行变化检测。

【讨论】：