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

Question

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

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

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