Question

我正试图绑定＆＃34; oninput＆＃34;输入范围元素的事件到在各个typescript文件中声明的自定义方法。

以下是HTML元素：

<input type="range" id='motivation-grade' value="3" min="1" max="5">

这是我在angular2组件的ngOnInit方法中使用的事件监听器代码：

  ngOnInit() {
    this.elem = document.getElementById('motivation-grade');
    this.elem.addEventListener("click", this.motivation(document.getElementById('motivation-grade').value));
  }

这里有动机（str：string）方法，我希望每次用户更改时都会根据所选值显示一些链接。但是动机（）方法在开始时只发射一次，之后它似乎没有被击中。有人可以帮我理解我错过的东西吗？

Answer 1

我猜你正在使用Angular2。如果你想在输入点击时触发事件，你可以这样做。

<input type="range" id='motivation-grade' (click)="onInputClick(3)" value="3" min="1" max="5">

您的组件Typescript文件可以包含此内容。

public onInputClick(value){
  //do something ...
}

尝试避免Angular 2中的直接DOM操作。这是一种不好的做法

Answer 2

避免直接dom操纵。像Rudraprasad建议使用
<input type="range" id='motivation-grade' (click)="onInputClick($event)" value="3" min="1" max="5">
你可以使用
打印事件 onInputClick(event):void{ console.log(event); } 您最需要的值将存储在event.target.value

中

自定义方法在addEventListener方法中只触发一次？

2 个答案: