使用 jquery 滑动器在 angular 中更改循环和动态幻灯片内容

Question

我必须在滑入后更改内容 angular.I 在 sliding.But 后更改我的对象值它不会在 html.Can 中重新呈现任何人请帮助我实现 it.Below 是我的 jquery 滑动事件

   var mySwiper = new Swiper('.swiper-container', {
      direction: 'horizontal',
      loop: true,
      speed: 700,
      replaceState: true,
      initialSlide: 1,
      centeredSlides: true,
      slidesPerView: 'auto',
      loopedSlides: 2,


      onSlideChangeStart: MoveToNextOrPrevious,
      mousewheelControl: false
    });


  function MoveToNextOrPrevious() {
  if (mySwiper != undefined) {      
 if (mySwiper.swipeDirection == "next") 
   {   self.Navigate('swiperight');
   }
   }
  }

在导航功能中我更改了对象 value.But 它在 html

中没有更改

谢谢，

Answer 1

这很可能与区域有关。 Angular 在区域中运行进行更改检测时，第 3 方库不会自动运行在 angular 区域中。

在您的构造函数中，您可以注入 NgZone，然后使用回调

调用 zone.run

constructor(private zone: NgZone) { }

private MoveToNextOrPrevious() {
  this.zone.run(() => { /* your previous code */ });
}

这应该安排您的代码运行在 angular 区域内，因此您的更改应该被更改检测获取。

解释得更详细了in the docs for NgZone。

使用 jquery 滑动器在 angular 中更改循环和动态幻灯片内容

Loop and dynamic slide content changing in angular using jquery swiper

swiper

angular

angular5