onchange еквівалент в angular2

Question 1

Я використовую onchange, щоб зберегти значення мого діапазону введення у firebase, але у мене є помилка, яка говорить, що моя функція не визначена.

це моя функція

saverange(){
  this.Platform.ready().then(() => {
    this.rootRef.child("users").child(this.UserID).child('range').set(this.range)
  })
}

це мій html

<ion-item>
  <ion-row>
    <ion-col>Rayon <span favorite><strong> {{range}} km</strong></span></ion-col>
    <ion-col><input type="range" name="points" min="0" max="40" [(ngModel)]="range" onchange="saverange()"></ion-col>
  </ion-row>
</ion-item>

що еквівалентно onchange в angular, якщо такий існує. Дякую

Question 2

Ми можемо використовувати прив’язки Angular для відповіді на будь-які події DOM . Синтаксис простий. Ми називаємо ім’я події DOM у дужках і призначаємо йому цитований шаблонний вираз. - довідково

Оскільки він changeє у списку стандартних подій DOM , ми можемо використовувати його:

(change)="saverange()"

У вашому конкретному випадку, оскільки ви використовуєте NgModel, замість цього ви можете розбити двосторонній зв'язок:

[ngModel]="range" (ngModelChange)="saverange($event)"

Тоді

saverange(newValue) {
  this.range = newValue;
  this.Platform.ready().then(() => {
     this.rootRef.child("users").child(this.UserID).child('range').set(this.range)
  })
}

Однак при цьому підхід saverange()викликається при кожному натисканні клавіші, тому вам, мабуть, краще використовувати (change).

Question 3

У Angular ви можете визначити, event listenersяк у прикладі нижче:

<!-- Here you can call public methods from parental component -->
<input (change)="method_name()">

Question 4

@Mark Rajcok дав чудове рішення для іонних проектів, які включають введення типу діапазону.

У будь-якому іншому випадку неіонних проектів я запропоную наступне:

HTML:

<input type="text" name="points" #points maxlength="8" [(ngModel)]="range" (ngModelChange)="range=saverange($event, points)">

Компонент:

    onChangeAchievement(eventStr: string, eRef): string {

      //Do something (some manipulations) on input and than return it to be saved:

       //In case you need to force of modifing the Element-Reference value on-focus of input:
       var eventStrToReplace = eventStr.replace(/[^0-9,eE\.\+]+/g, "");
       if (eventStr != eventStrToReplace) {
           eRef.value = eventStrToReplace;
       }

      return this.getNumberOnChange(eventStr);

    }

Ідея тут:

Дозвіл (ngModelChange)методу виконувати задачу Setter:

(ngModelChange)="range=saverange($event, points)
Увімкнення прямого доступу до власного елемента Dom за допомогою цього виклику:

eRef.value = eventStrToReplace;