Angular 4中如何重写Getter值？自定义ValC计算逻辑需求

嘿，这个需求很好实现！核心思路就是给ValC加一个状态标记，区分它是自动计算生成还是用户手动输入的，优先使用手动输入的值来计算ValD。下面是具体的实现方案（以Angular为例，其他框架逻辑类似）：

1. 组件逻辑调整 #

首先在组件类里新增一个变量跟踪ValC的状态，再编写对应的更新方法：

export class CalculatorComponent {
  valA: number = 0;
  valB: number = 0;
  valC: number = 0;
  valD: number = 0;
  // 标记ValC是否被手动修改过
  private isValCManuallySet = false;

  // 当ValA/ValB变化时，仅在ValC未手动设置时更新它
  updateValCFromAB() {
    if (!this.isValCManuallySet) {
      this.valC = this.valA + this.valB;
      this.updateValD();
    }
  }

  // 用户手动输入ValC时触发，标记状态并更新ValD
  handleValCInput() {
    this.isValCManuallySet = true;
    this.updateValD();
  }

  // 统一更新ValD的方法
  updateValD() {
    this.valD = this.valC * 2;
  }

  // 可选：添加重置功能，让ValC回到自动计算状态
  resetValC() {
    this.isValCManuallySet = false;
    this.updateValCFromAB();
  }
}

2. 模板页面调整 #

在HTML模板里给输入框绑定对应的事件和数据：

<!-- ValA输入框 -->
<input type="number" [(ngModel)]="valA" (input)="updateValCFromAB()" placeholder="请输入ValA">

<!-- ValB输入框 -->
<input type="number" [(ngModel)]="valB" (input)="updateValCFromAB()" placeholder="请输入ValB">

<!-- ValC输入框，监听手动输入事件 -->
<input type="number" [(ngModel)]="valC" (input)="handleValCInput()" placeholder="可手动输入ValC">

<!-- 展示计算结果ValD -->
<div>
  <strong>ValD结果：</strong> {{ valD }}
</div>

<!-- 可选重置按钮 -->
<button (click)="resetValC()">重置ValC为自动计算</button>

效果说明 #

• 默认状态下：ValA=2、ValB=3时，ValC会自动计算为5，ValD=10
• 手动修改ValC后：比如把ValC改成7，ValD会立刻变成14；此时再修改ValA或ValB，ValC不会再跟着变化，始终用你手动输入的值计算ValD
• 点击重置按钮后：ValC会回到自动计算状态，重新根据当前ValA和ValB的值生成

内容的提问来源于stack exchange，提问作者Pratik Bhoir