如何在单击Bootstrap卡内的swiper.js图像next/prev按钮时停止传播

Question

我在bootstrap卡中使用ngx-swiper-wrapper，如下所示，顶部有一个路由器链路。因此，如果我在卡上的任何地方单击，它就会路由。工作正常！但是，如果我向左/向右滑动/单击任何滑动图像，我希望停止传播路由。我可以捕获事件，但似乎不知道如何停止事件方法中的传播。

任何帮助都将不胜感激。一个问题是'onIndexChange()'，$event只是一个索引号，所以我不能使用它，onSwiperEvent()也一样，我传入的$event是一个空数组。

仅供参考-我在下面尝试了两个，但都没有成功。也没有停止路由

preventClicksPropagation: true,
touchMoveStopPropagation: true

​

<div class="card" [routerLink]="['/events', event.id]">
  <swiper [config]="eventsSwiperConfig" [(index)]="index" (indexChange)="onIndexChange($event)" (swiperTransitionStart)="onSwiperEvent($event)"></swiper>
  <ng-container *ngFor="let photo of event.photoUrl">
    <div class="outer-img-container">
      <div class="img-container">
        <img class="card-img swiper-lazy" src="{{photo}}">
        <div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
      </div>
    </div>
  </ng-container>
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

​

Answer 1

我还没有找到解决方案，但我做了一个变通办法。

我把routerlink放在不同的div上(不是最顶层的div-bootstrap卡)。

因此，我仍然得到相同的结果，现在卡中只有3个不同的路由器链路，而不是顶部的1个