typescript OnPush更改检测策略对HostBinding()没有影响

50few1ms  于 2023-04-13  发布在  TypeScript
关注(0)|答案(1)|浏览(107)

我正在尝试优化一个复杂的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;
  }
uxhixvfz

uxhixvfz1#

Angular在内部使用ZoneJS,Monkey修补原生JS函数,如setTimeoutsetIntervalrequestAnimationFrame等。
这意味着,每次这些原生函数中的一个完成时,都会向Angular发出一个信号,让它知道应该检查更改。
如果你想避免这种情况,请使用Observables,它可以通过filterdistinctUntilChanged等操作符进行控制。

相关问题