Question

我有4张图像，当我单击图像时，我希望轮播导航到相应的索引。由于bootstrap的轮播与jquery一起使用，并且这是一个Angular应用程序，因此我正在使用elementRef选择轮播组件。但是，我无法找出更改幻灯片的方法。我在console.log中获得的所有内容都是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);
  }

Answer 1

有一个用于使用Bootstrap，NG-Bootstrap的Angular库。我认为您最好使用该方法，而不是尝试直接操作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库

如何更改自举轮播项目角度

1 个答案: