当用户在Angular 2中的视图上更改了某些内容时，如何检测Component中的更改？

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中，但是需要对输入绑定的每个属性执行此操作。

你也可以添加

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

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

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