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

Question

我正在创建的轮播有问题，因为在更改屏幕大小后会重复这些项目。 我的代码库来自 Eliseo 在这个Stackoverflow 问题中给出的答案，他的旋转木马具有在根据用户屏幕的尺寸和要显示的项目数量更改变量noCarousel后显示/隐藏箭头功能的功能，此功能显示隐藏箭头后项目加倍和/或加倍的细节

Stackblitz 中的代码：

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

重新创建问题的步骤（2 种方式）：

1. 如果在 Stackblitz 中打开代码时轮播具有活动箭头的功能，请展开示例屏幕直到箭头消失。
2. 如果在 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

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