Dart Angular组件：实时更新业务模型的double类型输入实现

我来帮你梳理下怎么实现这个实时更新的需求，核心是做好双向绑定和字符串到Double的类型转换这两点，具体步骤如下：

1. 子组件定义双向绑定的输入输出属性 #

首先把原来的暂存逻辑替换掉，定义支持双向绑定的输入输出对，让子组件能接收父级模型值并通知父级更新：

import 'package:angular/angular.dart';
import 'package:angular_components/angular_components.dart';

@Component(
  selector: 'double-input',
  templateUrl: 'double_input_component.html',
  directives: [MaterialInputComponent, NgIf],
)
class DoubleInputComponent {
  // 接收父级业务模型的double字段
  @Input()
  double? value;

  // 触发父级更新的事件流，命名必须是[输入属性名]Change，才能支持双向绑定语法
  @Output()
  Stream<double> get valueChange => _valueChangeController.stream;
  final _valueChangeController = StreamController<double>.broadcast();

  // 临时存储输入框的字符串值，用于实时验证
  String? _inputValue;

  // 处理输入框值变化
  void onValueChange(String inputValue) {
    _inputValue = inputValue;
    // 用tryParse避免无效输入抛出异常，保证模型不会被错误值污染
    final parsedValue = double.tryParse(inputValue);
    if (parsedValue != null && value != parsedValue) {
      // 更新子组件本地值
      value = parsedValue;
      // 通知父级更新业务模型
      _valueChangeController.add(parsedValue);
    }
  }

  // 验证输入是否有效（可选，用于显示错误提示）
  bool get isValid => double.tryParse(_inputValue ?? '') != null;

  @override
  void ngOnDestroy() {
    _valueChangeController.close();
    super.ngOnDestroy();
  }
}

2. 配置Material输入框模板 #

在组件模板里绑定值和变化事件，同时添加实时错误提示，提升用户体验：

<mat-input-container>
  <input
    matInput
    type="number"
    placeholder="请输入十进制数字"
    [ngModel]="value?.toString()"
    (ngModelChange)="onValueChange($event)"
    step="0.01"
  >
  <!-- 实时显示输入错误 -->
  <mat-error *ngIf="!isValid">请输入有效的十进制数字</mat-error>
</mat-input-container>

这里的细节说明：

• type="number"：让浏览器/移动端显示数字键盘，降低输入错误概率
• step="0.01"：控制输入步进，支持两位小数（可根据业务需求调整）
• [ngModel]="value?.toString()"：将double类型转为字符串显示在输入框中
• (ngModelChange)：监听输入框值变化，触发类型转换和父级模型更新

3. 父组件中关联业务模型 #

在父组件模板里，直接用双向绑定语法把业务模型的double字段和子组件绑定，这样输入框的有效输入会实时同步到父级业务模型：

<!-- 父组件模板 -->
<div>
  <h3>业务模型实时更新示例</h3>
  <double-input [(value)]="businessModel.productPrice"></double-input>
  <p>当前模型值：{{ businessModel.productPrice }}</p>
</div>

父组件类中定义业务模型实例：

import 'package:angular/angular.dart';

@Component(
  selector: 'parent-component',
  templateUrl: 'parent_component.html',
  directives: [DoubleInputComponent],
)
class ParentComponent {
  // 你的业务模型实例
  final BusinessModel businessModel = BusinessModel(productPrice: 19.99);
}

// 示例业务模型类
class BusinessModel {
  double productPrice;
  BusinessModel({required this.productPrice});
}

关键注意点 #

• 必须用double.tryParse而非double.parse：避免无效输入（比如非数字字符串）抛出异常，保证组件稳定性
• 双向绑定的命名规范：输出事件必须命名为[输入属性名]Change，这样才能使用[(value)]的简化绑定语法
• 清理资源：在组件销毁时关闭StreamController，避免内存泄漏

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