组件中的Angular 7滚动事件重新渲染滚动上的所有组件答案

【问题标题】：Angular 7 scroll event in component re rendering all components on scroll组件中的Angular 7滚动事件重新渲染滚动上的所有组件
【发布时间】：2020-01-01 12:56:17
【问题描述】：

我在我的组件中使用 HostListener 'window:scroll' 事件，如 demo 所示。当我滚动组件时，它会重新渲染自己。在控制台中，我正在打印应该只运行一次的组件内部的示例文本。

需要帮助我在这里做错了什么。

【问题讨论】：

这就是变化检测的工作原理。

标签： javascript angular typescript scroll angular7

【解决方案1】：

渲染由默认的变化检测策略触发。

基本上HeaderComponent是由HostListener触发来检查组件的状态，然后传播到子组件。

FirstComponent 的变化检测器默认为ChangeDetectionStrategy.Default，因此每次触发变化检测时它都会重新检查状态。另一种选择是将ChangeDetectionStrategy 设置为OnPush。

这将使组件仅在实际状态发生更改时才检查更改。例如，当Input() 或Output() 发生更改或引发模板事件时（例如HTML 中的(click)="onClick()"）。

我强烈建议您详细了解 Angular 中的更改检测机制。

这是有效的解决方案：

import { Component, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'app-first',
  template: `{{abc()}}`,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class FirstComponent  {
  constructor() {}
  abc(){
    console.log('first component')
  }
}

【讨论】：

很好的解释。每天都在学习，从未完成。谢谢！