AngularDart双向绑定添加变更回调的更优实现问询

当然有更清爽的解决方案！你目前写的getter/setter确实会产生冗余代码，其实完全可以利用AngularDart双向绑定的语法糖本质来简化实现。

[(ngModel)]本身就是[ngModel]="value"（数据从组件到模板的单向绑定）加上(ngModelChange)="handleChange($event)"（模板数据变化时触发组件回调）的语法糖。所以我们可以直接拆分这个语法糖，在ngModelChange事件里处理数据更新和回调逻辑，不用再额外定义中间的getter/setter。

具体实现代码： #

模板部分：

<material-input [ngModel]="dossier.invoiceNum" (ngModelChange)="onInvoiceNumUpdated($event)"></material-input>

组件部分：

void onInvoiceNumUpdated(String newValue) {
  // 先更新数据模型
  dossier.invoiceNum = newValue;
  // 触发你的变更回调
  _dossierChanged();
}

为什么这更好？ #

• 消除冗余代码：不用再为每个需要监听的字段单独写getter/setter，直接复用原有的dossier.invoiceNum字段
• 逻辑更清晰：数据更新和回调触发的逻辑都集中在一个回调函数里，可读性更强
• 灵活性更高：如果需要在数据更新前做额外处理（比如输入验证、格式化），直接在回调函数里添加逻辑即可，不用修改字段的访问器

这样改完之后，代码简洁度和可维护性都会提升不少。

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