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

Question

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

需要帮助我做错了什么。

Answer 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')
  }
}

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

Angular 7 scroll event in component re rendering all components on scroll

javascript

scroll

typescript

angular

angular7