Question

我需要在角度2应用中使用横幅滑块。我创建了一个名为banner slider的组件，它保存滑块的html，然后将其显示在应用程序组件的视图上。

问题是，当浏览器然后加载页面时，我得到的是三个堆叠的li在哪里，当我在index.html上直接使用代码时滑块工作正常？我是否需要做一些事情以使角度与jquery一起工作或者是否有一个角度2特色滑块是好的？如果没有，有谁知道从哪里开始构建一个？

我目前正在使用unslider | unslider.com

Answer 1

这个问题可以帮到你：

Angular2 with Jquery-ui Slider

这个想法是将jquery插件应用于Angular2组件中。这可以在ngOnInit方法中完成：

@Component({
  (...)
})
export class Slider implements OnInit {
  elementRef: ElementRef;
  slideValue: number;

  constructor(private elementRef: ElementRef) {
  }

ngOnInit() {
  jQuery(this.elementRef.nativeElement).slider({
      range: false,
      orientation: "vertical",
      min: 0,
      max: 100,
      value: 60,
      slide: (event, ui) => {
        (...)
      }
    });
  }
}

Answer 2

你可以在文档中使用任何你想要的jquery但是对于angular2能够使用它你必须在你所在的页面上启动它！

比你想象的更容易使用ngOnInit（）{}

所以，如果有人使用unslider你只需要

ngOnInit() {

  jQuery(document).ready(function ($) {
  $('.my-slider').unslider({autoplay: true, delay: 4000, arrows: false, nav: false});


}

所以无论Jquery需要在加载时运行，都要把它放在ngOnInit（）中。

如何使用angular2构建/使用滑块？

2 个答案: