如何隐藏第一个项目上的上一个箭头，最后一个项目上的下一个箭头，如果是单个项目：基于角度的项目；没有jQuery？ [英] How to hide prev arrow on first item, next arrow on last item, and both arrow if single item: angular based project; no jquery?

问题描述

这是一个我希望实现的模板文件：在第一个项目上隐藏上一个箭头，在最后一个项目上隐藏下一个箭头，如果是单个项目，则同时隐藏两个箭头。我使用了角度12版本的引导转盘。

//html code
<div id="carouselExampleControls" *ngIf="selectedMusic?.type==='image'" class="carousel slide" data-bs-touch="false" data-bs-interval="false" data-bs-wrap=false>
                        <div class="carousel-inner">
                          <div class="carousel-item" [ngClass] = "{ active: selectedMusic.src === data, first: first, last: last}" *ngFor="let data of carouselAsset; let first = first; let last = last" >
                            
                            <img *ngIf="selectedMusic?.type==='image'" [src]="data">
                          </div>
                        </div>
                        <button  class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                            <span class="visually-hidden">Previous</span>
                        </button>
                        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                          <span class="visually-hidden">Next</span>
                        </button>
                    </div>

模板文件中使用的carouselAsset，是对其他文件进行包模块的过滤操作后，才对图片文件进行过滤操作后的集合。

//ts code
      // For carouselAsset
      this.carouselAsset = this.packageDetails.assets.filter(item=>item.fileType==="Images")[0].files.map(itemUrl=>itemUrl.previewUrl);

推荐答案

摘自de文档control via javascript

Bootstrap的旋转木马类公开了两个用于挂钩的事件 旋转木马功能。这两个事件都有以下附加内容 属性：

direction: The direction in which the carousel is sliding (either "left" or "right").
relatedTarget: The DOM element that is being slid into place as the active item.
from: The index of the current item
to: The index of the next item

所有传送带事件都在传送带本身激发(即在)。事件类型描述幻灯片.bs.carousel触发 在调用幻灯片实例方法时立即执行。 在旋转木马完成其滑动时触发。 过渡。

var myCarousel = document.getElementById('myCarousel')

myCarousel.addEventListener('slide.bs.carousel', function () {
  // do something...
})

我们现在知道，可以控制旋转木马何时更改。但在ANGLE中，我们通常不会使用docuemnt.getElementById、模板引用变量和ViewChild。而且，使用from Event rxjs操作符比使用addEventListener更好。因此，首先我们将为元素提供模板引用变量

<div #carousel id="carouselExampleControls" class="carousel slide"..>
    <div class="carousel-inner">
        <div #item *ngFor="let carousel of carousels; class="carousel-item">
             ....
        </div>
    </div>
</div>

参见两个引用变量carousel和item

想法是在ngOnInit中创建一个可观测对象，以了解ngOnInit中的活动旋转木马

  @ViewChildren('item') items:QueryList<ElementRef>
  @ViewChild('carousel',{static:true}) carousel!:ElementRef

  change$:any //<--our observable

  ngOnInit(){
    //enclosed under a setTimeout to give Angular time to
    //give value to "items" and "carousel"
    setTimeout(()=>{
      this.items.first.nativeElement.classList.add("active")
      this.change$=fromEvent(this.carousel.nativeElement,'slide.bs.carousel').pipe(
         startWith({to:0}),
         map((res:any)=>res.to))
    })
  }

如果我们在我们的.html中编写类似

Actual slider: {{change$|async}}

我们将了解如何将图像长度设置为0

好的，我们可以使用这个，删除前面的行并将按钮放在一个ng容器下

<ng-container *ngIf="{ item: change$ | async } as actual">
  <button
    *ngIf="actual.item != 0"
    class="carousel-control-prev"
    ...
  >
    ...
  </button>
  <button
    *ngIf="actual.item < carousels.length - 1"
    class="carousel-control-next"
    ...
  >
    ...
  </button>
</ng-container>

(*)*ngIf="{prop:observable|async} as variable结构的使用非常常见，它使变量的值{prop:0}{prop:1}...这使得不需要对可观察对象进行两次订阅。

Astackbliltz

这篇关于如何隐藏第一个项目上的上一个箭头，最后一个项目上的下一个箭头，如果是单个项目：基于角度的项目；没有jQuery？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！