如何在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