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

この記事を読んでください。

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

コンポーネントのイベントは、新しいfunctions.Pleaseは、以下を参照してください定義する必要があなたの値を結合して、span.Noに同じことをバインドするngmodelを使用することができますhttps://toddmotto.com/component-events-event-emitter-output-angular-2