如何在Angular子类中覆盖变量而非方法？优化频繁调用问题

你发现的这个问题非常关键——Angular的变更检测机制会在每次用户交互（比如鼠标移动）时执行模板里绑定的方法，这确实会造成不必要的性能损耗，换成属性绑定是非常合理的优化方向。下面是具体的修改步骤：

1. 调整抽象类MyParent的定义 #

把原来的抽象方法替换为公共布尔属性，既让子类可以直接赋值，也保证外部类能正常访问：

// myParent.class.ts
export abstract class MyParent {
  // 定义公共属性，由子类负责初始化或更新
  public isMyProperty: boolean;
}

如果需要强制子类必须设置这个属性，也可以用抽象getter的方式（子类必须实现该getter逻辑）：

export abstract class MyParent {
  public abstract get isMyProperty(): boolean;
}

2. 更新子类MyChild的实现 #

如果用公共属性的方式，直接在子类构造函数或合适的生命周期钩子中初始化值：

// myChild.class.ts
import { MyParent } from './myParent.class';

export class MyChild extends MyParent {
  constructor() {
    super();
    // 初始化属性值
    this.isMyProperty = true;
  }

  // 可选：提供方法后续更新属性值
  updateMyProperty(newValue: boolean) {
    this.isMyProperty = newValue;
  }
}

如果用抽象getter的方式，子类需要实现getter逻辑，同时可以用私有变量存储实际值：

export class MyChild extends MyParent {
  private _isMyProperty = true;

  // 实现抽象getter
  public get isMyProperty(): boolean {
    return this._isMyProperty;
  }

  // 可选：提供方法更新内部值
  public setMyProperty(value: boolean) {
    this._isMyProperty = value;
  }
}

3. 修改模板绑定逻辑 #

直接绑定属性即可，不需要加方法调用的括号：

<!-- my.component.html -->
<div class="my-label" *ngIf="isMyProperty"></div>

4. 确保外部类可通过@ViewChild访问 #

因为isMyProperty是MyParent定义的公共属性（或公共getter），当你在其他组件中通过@ViewChild获取MyChild实例后，就能直接访问这个属性：

// 其他组件类示例
import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { MyChild } from './myChild.class';

@Component({
  // 组件配置
})
export class SomeComponent implements AfterViewInit {
  @ViewChild(MyChild) myChild: MyChild;

  ngAfterViewInit() {
    // 直接访问属性值
    console.log(this.myChild.isMyProperty); // 输出true
    // 如果有更新方法，也可以修改值
    // this.myChild.updateMyProperty(false);
  }
}

这样修改后，模板绑定只会在属性值实际变化时触发变更检测，不会再因为鼠标移动等事件频繁执行方法，同时外部类也能正常访问该属性。

内容的提问来源于stack exchange，提问作者Dani Che