ngx-bootstrap carousel在单击下一步/上一步按钮时丢失的悬停暂停

Question

我有一个angular5应用程序，它有一个页面实现了ngx-bootstrap carousel组件，它使用默认的noPause属性来暂停图像滚动操作，它工作得很好。

当我使用“下一步”或“上一步”按钮点击幻灯片时，幻灯片的自动滚动再次启动，这样每次单击轮播时，轮播就会跳过两个图像，所以鼠标在轮播上的事实被忽略了。

演示版本的旋转木马似乎有类似的问题(https://valor-software.com/ngx-bootstrap/#/carousel#pause-on-hover)，但我不确定是否可以在单击幻灯片时重新设置noPause值？不确定是否有人知道这是否可能？

这是我对旋转木马的实现：

<carousel [noPause]="false">
  <slide *ngFor="let item of carouselItems">
    <img [src]="item.mediaFileURL | safeUrl" />
  </slide>
</carousel>

谢谢

Answer 1

事实证明，carousel代码将在单击next/prev按钮时触发(mouseup)事件上的carousel的play()。因此，我可以在carousel周围添加一个包装器来覆盖事件，并运行carousel的pause()函数。

<div (mouseenter)="setPause()" (mouseleave)="setPlay()" (mouseup)="setPause()">

我可以通过在我的typescript文件中添加对competent的引用来运行carousel上的函数，方法是：

@ViewChild('carousel') carousel: CarouselComponent;

setPlay(): void {
    this.carousel.play();
}
setPause(): void {
    this.carousel.noPause = false;
    this.carousel.pause();
}

希望这能帮助到一些人。

Answer 2

尝试activeSlideChange侦听滑块事件并将noPause设置为false

<carousel (activeSlideChange)="noPause = false" [noPause]="false">