Question

我已经使用ng-bootstrap https://ng-bootstrap.github.io/#/components/carousel/examples#navigation在有角度的版本7中显示轮播。并且我想获取图像的当前索引。我需要用它来显示与图像相对应的背景色。然后，我看到一个事件（幻灯片），它向我显示了一些可用于确定图像索引的元信息。（我总共有3张图片）

{"prev":"ngb-slide-1","current":"ngb-slide-2","direction":"left"}

当我导航到其他页面并返回时的一个问题。元信息从ngb-slide-4而不是ngb-slide-0开始。

在这里https://angular-ndxybr.stackblitz.io/

查看我的链接演示

返回我的问题如何在滑动图像时获取图像的索引？非常感谢。

我可以通过从ngb-slide-2或ngb-slide-5（下一次）中提取数字来解决。 index =数字％3，但如果图像更改数量不正确，则不正确

Answer 1

NgbSlide指令具有一个id输入属性，如果您未设置该属性，该属性将自动生成。但是，您可以对其进行设置以确保它始终为您提供图像索引：

<ngb-carousel *ngIf="images" (slide)="onSlide($event)">
  <ng-template *ngFor="let image of images; let i = index" ngbSlide [id]="'slideId_' + i">
    <img [src]="image" alt="Random slide">
  </ng-template>
</ngb-carousel>

然后可以从id中提取索引：

onSlide(event) {
  const imageIndex = parseInt(event.current.replace("slideId_", ""), 10);
  ...
}

有关演示，请参见this stackblitz。

如何在ng-bootstrap Carousel中获取索引图像

1 个答案: