Question

当我假设用户更改了输入类型的值（比如单选按钮，输入文本，输入文本区域等）时，我试图检测更改。

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

我不想使用（ngModelChange）=＆＃34; detectChanges（$ event）＆＃34;检测变化因为我需要使它变得通用，以便我可以用于整个组件的输入类型

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提取了一些您可能需要照顾自己的差异。

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

1 个答案: