如何更改 bootstrap 个轮播项目 Angular

Question

我有 4 张图片，当我点击这些图片时，我希望轮播导航到相应的索引。由于 bootstrap 的旋转木马与 jquery 一起使用，并且这是一个 Angular 应用程序，因此我将 elementRef 用于 select 旋转木马组件。但是，我想不出更改幻灯片的方法。当我 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);
  }

Answer 1

有一个 Angular 库可用于 Bootstrap、NG-Bootstrap。我认为你最好使用它而不是直接操纵 DOM。

他们也支持 Bootstrap 旋转木马，可在此处找到：https://ng-bootstrap.github.io/#/components/carousel/examples

如果你真的坚持自己做这些基础知识，你需要一种方法来管理轮播项目上的“活跃”cssclass。

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

您的 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 库

如何更改 bootstrap 个轮播项目 Angular

How to change bootstrap carousel items Angular

carousel

typescript

bootstrap-4

angular

elementref