时间戳

首页 > 解决方案 > 使用jquery swiper以角度改变循环和动态幻灯片内容

angular - 使用jquery swiper以角度改变循环和动态幻灯片内容

问题描述

我必须在角度滑动后更改内容。我在滑动后更改了我的对象值。但它没有在 html 中重新呈现。谁能帮我实现它。下面是我的 jquery swiper 事件

   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');
   }
   }
  }

在导航功能中，我更改了对象值。但在 html 中没有更改

谢谢，

标签： angularangular5swiper

解决方案

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

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

constructor(private zone: NgZone) { }

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

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

在 NgZone 的文档中有更详细的解释。

推荐阅读