0

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

组件.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>

组件.ts

  @ViewChild('carousel') carouselElementRef: ElementRef;

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

1 回答 1

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 库

于 2020-07-06T18:40:31.497 回答