为 Angular 中的每个 mdb-carousel 项目添加间隔答案

【问题标题】：Add interval for each mdb-carousel item in Angular为 Angular 中的每个 mdb-carousel 项目添加间隔
【发布时间】：2021-08-27 19:51:02
【问题描述】：

我想为 mdb-carousal 中的每个项目添加不同的间隔。我发现很少有解决方案，但它是基于 jQuery 的。我想要 Typescript 中的解决方案。

<div> <mdb-carousel [interval]="1000" [isControls]="false" class="carousel slide carousel-fade" [animation]="'fade'">
<mdb-carousel-item>
  <!-- THIS NEEDS TO BE DISPLAYED FOR 5 SECS -->
  <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(68).jpg" alt="First slide">
</mdb-carousel-item>

<mdb-carousel-item>
  <!-- THIS NEEDS TO BE DISPLAYED FOR 15 SECS -->
  <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(6).jpg" alt="Second slide">
</mdb-carousel-item>

【问题讨论】：

标签： angular angular-material carousel mdbootstrap

【解决方案1】：

通过对可用轮播属性的更多研究，我能够解决这个问题：以下是解决方案。

在 HTML 中，我们需要使用可用于幻灯片事件的 activeSlideChange 方法将轮播组件传递回 Typescript。还需要为每个轮播项目添加id以供参考

-- HTML

<div>
  <mdb-carousel  #carousal  [interval]="1000" [isControls]="false" class="carousel slide carousel-fade" [animation]="'fade'"
  (activeSlideChange)="activeSlideChange(carousal)" >
    <mdb-carousel-item id='home'>
      <!-- THIS NEEDS TO BE DISPLAYED FOR 5 SECS -->
      <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(68).jpg" alt="First slide">
    </mdb-carousel-item>

    <mdb-carousel-item id='time'>
      <!-- THIS NEEDS TO BE DISPLAYED FOR 15 SECS -->
      <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(6).jpg" alt="Second slide">
    </mdb-carousel-item>
  </mdb-carousel>
</div>

在打字稿中，我们可以这样定义activeSlideChange方法

 activeSlideChange(cc: CarouselComponent){
   let slideItem = cc.slides[cc.activeSlide];
   let id = slideItem.el.nativeElement.id;
   console.log(id);
    if ( id === 'home') {
        cc.interval = 1000 * 5 ; // 5 secs
    } else if ( id === 'time') { 
      cc.interval = 1000 * 15; // 15 secs
    }else  {
      cc.interval = 5000;
    }
  }

【讨论】：