如何在Angular 2中使用ngModelChange更新模型值时调用方法？

Question

我使用下面的代码在使用ngModelChange事件更改模型值时调用方法。

app.component.ts： -

@Component({
  selector: 'my-app',
  template: `
    <div>
     <input type="text" [(ngModel)]="name" (ngModelChange)="onModelChanged()"/>
     <input type="button" value="Submit" (click)="updateModelValue()"/>
    </div>
  `,
})
export class App {
  name:string;
  constructor() {
    this.name = `Angular! v${VERSION.full}`
  }
  updateModelValue() {
     this.name = `Angular 2! v${VERSION.full}`
  }
  onModelChanged() {
    alert('Model Changed');
  }
}

但是：-Kua zxsw Poi

当我从键盘按任意键时，此时已触发ngModelChange事件。但是当我通过按钮点击事件来更新模型值时，那时还没有触发ngModelChange事件。如何使用ngModelChange事件更改模型值时调用方法？

Answer 1

为了澄清，基于你在另一个答案（现在删除）中的评论，当你https://plnkr.co/edit/4WosE8e3G822qbxVKJER?p=info按钮时ngModelChange事件没有触发的原因是因为click事件只是ngModelChange指令的Output()属性。因此要触发此事件需要ngModel指令出现在您的html元素上，并且它被赋予的内容（如在ngModel中）将是其值，它将通过[(ngModel)]="name"更新。因此，在你的第一个ngModelChange元素中，你正确地使用了input及其输出属性ngModel，但在ngModelChange类型的button中，你不能指望相同的行为。

希望它有意义。请查看这些链接，input和docs，了解更多信息。

Answer 2

您可以在单击处理程序中触发输入事件，如下所示：

source