我正在尝试优化一个复杂的Angular 组件,其中数据更新非常频繁。为此,我使用了OnPush更改检测策略,该策略运行良好,并显着减少了对属性getter的调用次数。但HostBindings的检查次数仍然与Default策略相同。
是我遗漏了什么,还是OnPush对HostBindings没有影响?
下面是一个slackblitz示例。请检查控制台日志。https://stackblitz.com/edit/angular-9w6nwd?file=src/main.ts
下面是示例的一个片段:
@HostBinding('[attr.style]')
get styles(): string {
console.log(`cd count: ${++this.cdCount}`); // stills gets called same no. of times as earlier
return `--dynamic-height: ${this.calculatedHeight}`;
}
cdCount = 0;
showLinkCount = 0;
calculatedHeight = 0;
private _showLink = true;
set showLink(val: boolean) {
this._showLink = val;
}
get showLink(): boolean {
console.log(`link count: ${++this.showLinkCount}`); //checked only when I call this.cd.detectChantges()
return this._showLink;
}
1条答案
按热度按时间uxhixvfz1#
Angular在内部使用ZoneJS,Monkey修补原生JS函数,如
setTimeout
,setInterval
,requestAnimationFrame
等。这意味着,每次这些原生函数中的一个完成时,都会向Angular发出一个信号,让它知道应该检查更改。
如果你想避免这种情况,请使用Observables,它可以通过
filter
,distinctUntilChanged
等操作符进行控制。