如何更改引导轮播项目Angular答案

【问题标题】：How to change bootstrap carousel items Angular如何更改引导轮播项目Angular
【发布时间】：2020-10-26 21:49:56
【问题描述】：

我有 4 张图片，当我点击这些图片时，我希望轮播导航到相应的索引。由于 bootstrap 的轮播与 jquery 一起使用并且这是一个 Angular 应用程序，因此我使用 elementRef 来选择轮播组件。但是，我想不出改变幻灯片的方法。当我 console.log ElementRef 时，我得到的只是 html。有没有更好的方法来做到这一点。

component.html

            <!-- Carousel -->
            <div *ngIf="collection === 'Boudoir'" class="card img-row ">
                <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
                  <div class="carousel-inner">
                    <div class="carousel-item active">
                      <img class="d-block w-100" src="" alt="First slide">
                    </div>
                    <div class="carousel-item">
                      <img class="d-block w-100" src="" alt="Second slide">
                    </div>
                    <div class="carousel-item">
                      <img class="d-block w-100" src="" alt="Third slide">
                    </div>
                    <div class="carousel-item">
                      <img class="d-block w-80" src="" alt="Fourth slide">
                    </div>
                  </div>
                </div>
            </div>

<div *ngIf="collection === 'Boudoir'"class="img-row picsRow">
    <li class="img-column pics">
      <img class="gallery" src="" (click)="CarouselChange(1)">
      <img class="gallery" src="" (click)="CarouselChange(2)">
      <img class="gallery" src="" (click)="CarouselChange(3)">
      <img class="gallery" src="" (click)="CarouselChange(4)">
    </li>
  </div>

component.ts

  @ViewChild('carousel') carouselElementRef: ElementRef;

  CarouselChange(index) {
    console.log(index);
    console.log(this.carouselElementRef.nativeElement);
  }

【问题讨论】：

标签： angular typescript bootstrap-4 carousel elementref

【解决方案1】：

有一个 Angular 库用于使用 Bootstrap，NG-Bootstrap。我认为使用它比尝试直接操作 DOM 更好。

他们也支持 Bootstrap Carousel，在这里可以找到：https://ng-bootstrap.github.io/#/components/carousel/examples

如果你真的坚持自己做这件事的基础，你需要一种方法来管理轮播项目上的“活动”css类。

这样的事情可以让你朝着正确的方向前进，但是 Bootstrap 轮播除了显示/隐藏特定幻灯片之外还有更多功能：

您的 component.ts 文件

currentIndex: number = 1;
CarouselChange(index) {
    this.currentIndex = index;
}

你的模板

<!-- Carousel -->
            <div *ngIf="collection === 'Boudoir'" class="card img-row ">
                <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
                  <div class="carousel-inner">
                    <div class="carousel-item" [class.active]="currentIndex === 1">
                      <img class="d-block w-100" src="" alt="First slide">
                    </div>
                    <div class="carousel-item"  [class.active]="currentIndex === 2">
                      <img class="d-block w-100" src="" alt="Second slide">
                    </div>
                    <div class="carousel-item"  [class.active]="currentIndex === 3">
                      <img class="d-block w-100" src="" alt="Third slide">
                    </div>
                    <div class="carousel-item"  [class.active]="currentIndex === 4">
                      <img class="d-block w-80" src="" alt="Fourth slide">
                    </div>
                  </div>
                </div>
            </div>

<div *ngIf="collection === 'Boudoir'"class="img-row picsRow">
    <li class="img-column pics">
      <img class="gallery" src="" (click)="CarouselChange(1)">
      <img class="gallery" src="" (click)="CarouselChange(2)">
      <img class="gallery" src="" (click)="CarouselChange(3)">
      <img class="gallery" src="" (click)="CarouselChange(4)">
    </li>
  </div>

为了使它更好，您可能应该在模板中循环，以便您可以动态添加任意数量的项目，或使用 NG-Bootstrap 库

【讨论】：