如何在Angular 2组件上添加简单的onchange事件

Question

我有组件文件及其templateURL html文件。

在HTML文件中，我有以下代码：

<input type="range" min="0" max="20" value="0" step="1" change="showValue(this.value)" /> 
    <span id="range">0</span> 

在组件中，我有这样的代码：

ngAfterviewInit(){ 
    function showValue(newValue){ 
     document.getElementById("range").innerHTML=newValue; 
    } 
} 

我把函数在那里，但它说，它没有定义。我不知道如何定义函数，以及如何在html文件中调用它。

任何想法？在此先感谢，我对A2非常陌生。

Answer 1

您可以使用ngmodel绑定你的价值，并结合相同的，以span.No需要定义任何新的functions.Please见下文。

<input type="range" min="0" max="20" [(ngModel)]="variable" step="1" /> 
<span id="range">{{variable}}</span> 

你需要在部件侧申报变量。

希望它有帮助！

Answer 2

<div ng-app=""> 
<input type="range" min="0" max="20" value="0" step="1" ng-model="rangenumber" /> 
<span ng-bind="rangenumber" id="range">0</span> 
</div> 

组件事件阅读这篇文章https://toddmotto.com/component-events-event-emitter-output-angular-2