javascript - 优化 Angular 8 中的简单图像轮播

Question

我正在我的 Angular 8 应用程序中创建一个简单的轮播。它只有一个下一个和上一个按钮，可以在其中左右滑动图像。由于我不想使用任何外部库，例如 jQuery 和 NgB，我开始使用纯 JS 进行编码。正如您从我的代码示例中看到的那样，这是一个相当繁琐的过程，所以我认为必须有一种 Angular 方法来优化它，所以我来征求您的意见和建议。

下面是我的 html，其中第一张幻灯片获取类 activeSlide，其他幻灯片获取 inactiveSlide。 inactiveSlide 设置为 display: none;转换:translateX(-100%)； .... 并且 activeSlide 具有使幻灯片可见的相应 CSS。

  <div class="tours-right">
    <div class="tours-arrow-left" (click)="getNextSlide()">
    </div>
    <div *ngFor="let image of pdfCovers; let i = index;" [ngClass]="i == 0 ? 'activeSlide' : 'inactiveSlide'" class="tour-container">
      <a href="{{image.link}}" target="_blank">
        <div class="tour-img" [style.backgroundImage]="'url(' + image.img + ')'">
        </div>
      </a>
    </div>
    <div class="tours-arrow-right" (click)="getPrevSlide()">
    </div>
  </div>

下面是我的 .ts 和我的两个函数 getNextSlide() 和 getPreviousSlide 并且 JS 非常乏味。

  getNextSlide() {
      //figure out the Angular way
    let slideWrapper = document.querySelector('.activeSlide');
    slideWrapper.classList.remove('activeSlide');
    slideWrapper.classList.add('inactiveSlide');
    let nextSlide = slideWrapper.nextSibling;
    nextSlide.classList.add('activeSlide');
    console.log(nextSlide);
  }

  getPrevSlide() {
    //figure out the Angular way
  }

基本上我想创建类似 this 的东西但更简单但仍然如何用 Angular 8 的方式来做到这一点!谢谢!

Answer 1

尝试结构化指令。 carousel 其实就是结构指令的典型例子。看看这里例如:

https://netbasal.com/understanding-angular-structural-directives-659acd0f67e