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

<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

Answer 2

您可以使用 ngmodel 来绑定您的值并将其绑定到span.No需要定义任何新函数。请参阅下文。

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

您需要在组件端声明变量。

希望它有所帮助!!

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

2 个答案: