Question

我发现了许多与我类似的问题，但都涉及到jQuery，正如标题所述，我花了两天的时间试图在Angular中完成此任务，但无法从Bootstrap文档页面获得经过修改的简单代码：

我知道像我的教授所说的那样，将jQuery嵌入Angular项目不是一个好习惯，那么没有jQuery，有没有办法做到这一点？

您注意到，我在.carousel中添加了相同的类，因为我知道我不能多次使用相同的ID。

非常感谢！

<div class="container">  

  <!-- data-ride="carousel" -->
  <!-- id="carouselExampleControls" -->
      <div  class="carousel slide carouselExampleControls" style="height: 300px" data-interval="false">
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="./../assets/1.jpg" class="d-block w-100" alt="...">
          </div>
          <div class="carousel-item">
            <img src="./../assets/2.JPG" class="d-block w-100" alt="...">
          </div>
          <div class="carousel-item">
            <img src="./../assets/3.JPG" class="d-block w-100" alt="...">
          </div>
        </div>

        <a class="carousel-control-prev" data-target=".carouselExampleControls" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" data-target=".carouselExampleControls" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>

  <!-- id="carouselExampleControls" -->
  <div class="carousel slide carouselExampleControls" style="height: 300px">
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="./../assets/1.jpg" class="d-block w-100" alt="..." >
        </div>
        <div class="carousel-item">
          <img src="./../assets/2.JPG" class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
          <img src="./../assets/3.JPG" class="d-block w-100" alt="...">
        </div>
      </div>
      <!-- <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a> -->
    </div>
</div>

Answer 1

我实际上是在尝试寻找最简单的方法，该方法基本上是更改a的backgroundImage而不是为此目的而简单实用，这是代码：

  @ViewChild('local') local: ElementRef;

  imgTracker = 0;


  imgArr = [
    'url(./../../../assets/1.jpg)',
    'url(./../../../assets/2.JPG)',
    'url(./../../../assets/3.JPG)'
  ];

ngOnInit() {
    this.renderer2.setStyle(this.local.nativeElement, 'backgroundImage', this.imgArr[this.imgTracker]);
    }


nextImg() {

      this.imgArr.push(this.imgArr[this.imgTracker]);
      this.renderer2.setStyle(this.local.nativeElement, 'backgroundImage', this.imgArr[this.imgTracker]);
      if (this.imgTracker >= this.imgArr.length) {
        this.imgTracker = 0;
        this.imgArr.length = 0;
      }
      this.imgTracker++;
    }

HTML：

<div class="image" #local></div>

使两个轮播同时使用下一个和上一个箭头按钮

1 个答案: