Question

我正在做一个有角度的项目，我需要掌握变更检测功能，以使我的项目可用。

这是最小的复制品：https://stackblitz.com/edit/angular-3py5bh

<div *ngIf="timeleft$ | async as timeleft"> //countdown (rxjs)
    {{timeleft}}
</div>
<hello></hello> // simulated intensive function

因此，基本上，我有一个带有倒计时的主要组件，该组件每0.01秒刷新一次。在此组件中，我有一个嵌入式的“ hello”组件，该组件包括（在实际项目中）非常密集的计算。我用“慢函数”模拟了这些密集的计算。

问题：每次倒计时刷新（因此100次/秒）时，Hello组件也会刷新，并且“慢速功能”被称为...

结果，倒计时显示损坏（太慢）！！！

我知道答案取决于“变更检测”，但是我太新了，无法很好地处理它。这就是为什么我要你的帮助！

非常感谢！！！ Serge

Answer 1

我会尝试在“慢速”组件上设置changeDetection：ChangeDetectionStrategy.OnPush。这可以解决您的堆栈闪电问题，如下所示：

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

@Component({
  selector: 'hello',
  template: `<h1>Result : {{mySlowFunction(8)}}!</h1>`,
  styles: [`h1 { font-family: Lato; }`],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class HelloComponent {
  @Input() name: string;

mySlowFunction(baseNumber) {
    let result = 0; 
    for (var i = Math.pow(baseNumber, 7); i >= 0; i--) {        
        result += Math.atan(i) * Math.tan(i) ;
    };
  return result;

}

}

Angular：我需要有关“更改检测”的帮助

1 个答案: