angular - 当用户在 Angular 2 的 View 中更改某些内容时如何检测组件的更改？

Question

当假设用户更改了输入类型的值(例如单选按钮、输入文本、输入文本区域等)时，我正在尝试检测变化

<input type="text" pInputText [(ngModel)]="mileage"/>

我不想使用 (ngModelChange)="detectChanges($event)"来检测更改，因为我需要使其通用，以便我可以用于整个组件的输入类型

Answer 1

<form #myForm>
  <input type="text" pInputText [(ngModel)]="mileage" name="xxx"/>
  ...
</form>

class MyFormComponent {
  @ViewChild('myForm') myForm:NgForm;

  ngAfterViewInit() {
    this.myForm.valueChanges.subscribe(val => console.log(val));
  }
}

https://angular.io/docs/ts/latest/cookbook/form-validation.html#!#template2示例中也使用了此方法。

您还可以使 mileage 成为 getter/setter，然后您可以将代码放入值更改时执行的 setter，但这需要为输入绑定(bind)到的每个属性完成.

还可以添加

@HostListener('change', ['$event'])
onChange(e) {
  console.log(e);
}

@HostListener('input', ['$event'])
onInput(e) {
  console.log(e);
}

您需要为您可能感兴趣的每个事件添加一个监听器。浏览器之间存在一些差异，它们针对什么编辑操作触发什么事件。 ngModel 抽象出一些您可能需要自行处理的差异。