Angular组件表单如何正确触发ngOnChanges监听输入变化

你对ngOnChanges的触发逻辑理解存在偏差：

• ngOnChanges生命周期钩子仅会在组件的@Input()绑定值从父组件传入并发生变更时触发，组件内部的表单值变化不会调用这个钩子，你在表单标签上写的ng-change="ngOnChanges"是AngularJS的旧语法，在当前Angular版本中完全无效。
• 你定义的@Input() extra1没有任何父组件传值绑定，永远不会触发变更检测，这个场景完全不需要使用@Input。

要实现表单输入变化时自动计算总价，直接使用模板驱动表单原生的值变更监听即可，步骤如下：

1. 给表单控件加双向绑定，关联组件类属性
2. 监听控件值变更事件，触发总价计算逻辑
3. 编写独立的总价计算方法，根据选中配置更新显示值

修正后的组件HTML代码 #

<div class="card my-5">
<div class="card-body">

<form #carConfigurationForm="ngForm">
  <div class="form-group">
    <label for="extra">Extra 1&nbsp;</label>
    <select 
      name="extra1" 
      class="btn btn-secondary dropdown-toggle"
      [(ngModel)]="selectedExtra1"
      (ngModelChange)="calculateTotalPrice()"
    >
      <option value="default">Kein Extra</option>
      <option *ngFor="let extra of selectExtra" [ngValue]="extra">{{extra.name}} {{extra.preis}}&euro;</option>
    </select>
  </div>
  <div class="form-group">
    <label for="gesamtpreis">Gesamt&nbsp;</label>
    <span name="gesamtpreis">{{ gesamtpreis }}</span>
  </div>
</form>
</div>
</div>

改动点说明：

• 删除了无效的ng-change="ngOnChanges"绑定
• 给下拉选择框加了[(ngModel)]双向绑定，用[ngValue]直接绑定整个配置对象，方便后续直接读取价格，不需要额外遍历数组匹配
• 加了(ngModelChange)事件监听，值变化时自动触发总价计算
• 总价显示直接用插值表达式即可，不需要用[innerHTML]绑定

修正后的组件TS代码 #

import { Component, OnInit } from '@angular/core';
import { Extra } from '../model/extra';
import { ExtraService} from '../service/extra.service';

@Component({
  selector: 'app-car-configuration-form',
  templateUrl: './car-configuration-form.component.html',
  styleUrls: ['./car-configuration-form.component.sass']
})
export class CarConfigurationFormComponent implements OnInit {

  selectExtra : Extra[] = [];
  // 存储选中的额外配置，默认值为无
  selectedExtra1: Extra | 'default' = 'default';
  gesamtpreis : string = 'kein Preis';
  // 基础车价，可根据实际业务替换为固定值或接口返回值
  basePrice = 0;

  constructor(private extraService: ExtraService) { }

  getSelectedExtra(): void{
    this.extraService.findAll()
      .subscribe(selectExtra => this.selectExtra= selectExtra);
  }

  ngOnInit() {
    this.getSelectedExtra();
  }

  // 总价计算逻辑
  calculateTotalPrice() {
    let total = this.basePrice;
    if (this.selectedExtra1 !== 'default') {
      total += this.selectedExtra1.preis;
    }
    // 格式化价格为带欧元符号的两位小数格式
    this.gesamtpreis = `${total.toFixed(2)}€`;
  }
}

改动点说明：

• 删除了这个场景下完全无用的OnChanges、SimpleChanges、@Input()相关代码
• 新增selectedExtra1属性存储选中的配置项，basePrice存储车辆基础价格
• 独立封装calculateTotalPrice方法处理总价计算，后续新增其他配置项（比如extra2、extra3）时，只需要给对应控件加同样的ngModel绑定，在这个方法里累加对应价格即可，逻辑清晰易维护。

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