typescript - Hvordan oppdage endringer i komponenten når brukeren har endret noe i visningen i Angular 2?

Jeg prøver å oppdage endringer når brukeren eventuelt har endret verdi for inputtype (som for radioknapp, tekstfelt, tekstområde osv.)

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

Jeg vil ikke bruke (ngModelChange)="detectChanges($event)" for å oppdage endringene fordi jeg trenger å gjøre det generisk slik at jeg kan bruke det for hele komponentens inputtype

Svar #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 bruker også denne metoden i et eksempel.

Du kan også gjøre mileage til en getter/setter, da kan du legge kode i setteren som kjøres når verdien endres, men det må gjøres for hver egenskap som en input er bundet til.

Du kan også legge til

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

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

Du må legge til en lytter for hver hendelse du kan være interessert i. Det er noen forskjeller mellom nettlesere på hvilke hendelser de utløser for hvilken redigeringshandling. ngModel abstraherer bort noen forskjeller som du ellers måtte hatt måttet ta hensyn til selv.