这些项目使用 Angular 在动态多张幻灯片轮播中重复自身

Question

我创建的旋转木马有问题，因为在更改屏幕尺寸后项目会重复出现。我的代码库来自 Eliseo 在此中给出的答案，其中他的旋转木马具有 show/hide 箭头功能后根据用户屏幕的尺寸更改变量 noCarousel 和要显示的项目数量，此功能显示隐藏箭头后项目的详细信息加倍 and/or 三倍

Stackblitz 中的代码：

https://stackblitz.com/edit/angular-1vnbxc-zc9fz8?file=src/app/app.component.html

重现问题的步骤（2 种方式）：

如果在 Stackblitz 中打开代码时轮播具有活动箭头的功能，请展开示例屏幕直到箭头消失。
如果在 Stackblitz 中打开代码时，旋转木马具有非活动箭头功能，请折叠示例屏幕直到箭头被激活，然后展开它直到箭头消失。

Answer 1

有点复杂，当尺寸小于整个尺寸时，旋转木马复制图像以允许在两侧显示一点。

解决方案是将“重复的模板”存储在一个数组中

声明一个空数组

 added:EmbeddedViewRef<any>[]=[]

并且，当添加“模板”时使用推送添加到数组，如果“noCarousel”将其删除

  private resizeCarousel() {

    if (this.carousel) {
      let totalWidth = this.carousel.nativeElement.getBoundingClientRect().width;
      if (totalWidth > this.slides.length * this.slideWidth) {
        ....
        this.noCarousel = true;
        this.added.forEach(x=>x.destroy())
        return;
      }
      this.noCarousel = false;
      ...
      this.slides.last.viewContainer.createEmbeddedView(
        this.slides.last.templateRef
      );
      this.slides.forEach((x, index) => {
        if (index && index >= this.slides.length - this.increment - count) {
          this.added.push(
            this.slides.first.viewContainer.createEmbeddedView(x.templateRef)
          );
        }
        if (index < this.increment + count) {
          this.added.push(
            this.slides.last.viewContainer.createEmbeddedView(x.templateRef)
          );
        }
      });
      if (this.increment + 1 >= this.slides.length) {
        this.added.push(
          this.slides.first.viewContainer.createEmbeddedView(
            this.slides.first.templateRef,
            null,
            0
          )
        );
      }

      this.slides.first.viewContainer.createEmbeddedView(
        this.slides.first.templateRef
      );
      this.currentSlide = 0;
      this.transitionCarousel(0, this.currentSlide);
    }

我分叉了你的 stackblitz here

注意：stackblitz 真的有点老，我不确定它是否是制作轮播的最佳解决方案（如果我有时间，我会尝试检查更多）

这些项目使用 Angular 在动态多张幻灯片轮播中重复自身

The items repeat itself in a dynamic multiple slide carousel using Angular

html

javascript

carousel

typescript

angular