Angular：我需要 "change detection" 方面的帮助

Question

我正在做一个 angular 项目，我需要掌握变更检测以使我的项目可用。

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

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

所以，基本上，我有一个带倒计时的主要组件，每 0.01 秒刷新一次。在这个组件中，我有一个嵌入式 "hello" 组件，它包括（在实际项目中）相当密集的计算。我用 "slow function".

模拟了这些密集的计算

问题：每次倒计时刷新（所以 100 times/second），Hello 组件也会刷新，并调用 "slow function"...

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

我知道答案取决于 "change detection"，但我太新了，无法很好地处理它。这就是我请求您帮助的原因！

非常感谢！！！哔叽

Answer 1

我会尝试在您的 'slow' 组件上设置 changeDetection: ChangeDetectionStrategy.OnPush。这修复了你的 stackblitz，见下文：

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：我需要 "change detection" 方面的帮助

Angular : I need help on "change detection"

angular2-changedetection

angular

angular8