angular2中的onchange等价物答案

【问题标题】：onchange equivalent in angular2angular2中的onchange等价物
【发布时间】：2016-04-01 21:48:40
【问题描述】：

我正在使用 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>

angular 中的 onchange 等价物（如果存在）。谢谢你

【问题讨论】：

(change)，还有 5 场

标签： angular

【解决方案1】：

我们可以使用Angular event bindings回复any DOM event。语法很简单。我们将 DOM 事件名称括在括号中，并为其分配一个带引号的模板语句。 -- reference

由于change 在the list of standard DOM events 上，我们可以使用它：

(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)。

【讨论】：

奇怪的是，由于某种原因，这对我不起作用，该功能没有被触发.....我不知道为什么。看起来在最新版本的 Angular 中，您必须使用 (input) 作为文本类型的输入元素。

【解决方案2】：

在 Angular 中，您可以定义 event listeners，如下例所示：

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

【讨论】：

【解决方案3】：

@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;

【讨论】：

【解决方案4】：

你可以使用：

<input (input)="saverange()>

【讨论】：