Angular：OnPush变更检测策略对HostBinding()是否无效？

你观察到的现象是正常的——OnPush变更检测策略并不会减少HostBinding相关的getter调用次数，这是Angular的设计机制导致的，并非你遗漏了配置。

背后的逻辑 #

Angular的变更检测分为两个独立的部分：

• 组件内部视图的变更检测：这部分会被OnPush策略优化，只有当组件的输入属性变化、组件内部触发事件，或者手动调用detectChanges()时，才会执行检测。
• 宿主元素的绑定检测：组件自身作为DOM元素的属性/样式绑定（比如@HostBinding定义的内容），属于父组件变更检测周期的一部分。父组件执行变更检测时，会遍历所有子组件的宿主绑定并检查更新，这个过程不受子组件的OnPush策略控制。

结合你的代码分析 #

• 组件内的showLink getter：因为OnPush策略，只有在你手动调用cd.detectChanges()时才会被触发，符合预期；
• @HostBinding('[attr.style]')的styles getter：每次父组件触发变更检测都会被调用，所以调用次数和默认策略下一致。

优化建议 #

如果styles getter里的计算逻辑比较重，想要减少不必要的调用，可以试试这些方案：

• 缓存计算结果：不要在getter里直接计算，而是在依赖数据（比如calculatedHeight）变化时提前算出结果并存储，getter只返回缓存值；
• 手动操作宿主元素：用Renderer2直接更新宿主元素的属性，替代@HostBinding，这样可以在需要的时候才执行更新，避免被动触发；
• 优化父组件的变更检测：如果父组件更新频繁，给父组件也启用OnPush策略，从根源减少变更检测的次数。

你的代码片段 #

@HostBinding('[attr.style]')
get styles(): string {
  console.log(`cd count: ${++this.cdCount}`);  // 调用次数仍和默认策略一致
  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}`); // 仅在调用this.cd.detectChanges()时触发
  return this._showLink;
}

内容的提问来源于stack exchange，提问作者Sachin Parashar