在Angularjs 2

Question

我正在使用Angular 2，我试图找出如何替换我通常用jQuery做的所有事情。 （有没有一些很好的文章将jQuery映射到Angular 2？）

我想实现范围滑块，例如jQuery UI库：http://jqueryui.com/slider/#range。

我在我的html中开始使用它：

<div class="bar">
    <div id="slider-range" style="background-color:black; width:20px; height:20px;" (mousedown)="moveRange($event)"></div>
</div>

我希望能够将＃slider-range移动到左右两侧，并且应该限制为.bar。

在我的控制器中：

moveRange() {
    console.log(event.clientX);
}

我被困在哪里。我的第一个问题是，如何使用Angular修改＃slider-range的位置？

Answer 1

我认为使用样式绑定是更新#slider-range

位置的简单方法

<div id="slider-range" [style.left]="calculatedLeft" style="background-color:black; width:20px; height:20px;" ngStyle= (mousedown)="moveRange($event)"></div>

对于更复杂的样式绑定，您可以使用ngStyle