Ngx-swiper-wrapper 已禁用答案

【问题标题】：Ngx-swiper-wrapper disabledNgx-swiper-wrapper 已禁用
【发布时间】：2020-05-22 18:01:37
【问题描述】：

我已将一些数据加载到我的 ngx-swiper-wrapper 中。但是，当这种情况发生时，这个 swiper-button-disabled 会加载到下一个按钮和上一个按钮上。我尝试使用 javascript 删除它，但 swiper 对象仍然不会滚动。不知道有没有办法在获取数据后刷新/重新加载swiper对象。

  ngOnInit() {
         this.spinner.show().then( async () => {
          this.data.currentProgress.subscribe(progress => this.progress = progress);
          await this.eventService.fetchEvents();
          }).then(async () => {
            this.data.totalShuffledEvents.subscribe(shuffle => this.totalEvents = shuffle);
            var buttons = document.querySelectorAll('.swiper-button-next');
            buttons[0].classList.remove("swiper-button-disabled");
          }).then(() => {
            this.spinner.hide();
          });
     }

          <swiper *ngIf="type == 'component' && show" class="swiper-container" fxFlex="auto" [config]="config" [disabled]="disabled" (indexChange)="onIndexChange($event)" (swiperTransitionStart)="onSwiperEvent('transitionStart')" (swiperTransitionEnd)="onSwiperEvent('transitionEnd')">
            <div *ngFor="let event of totalEvents" class="swiper-slide">
...

【问题讨论】：

标签： angular typescript swiper

【解决方案1】：

更好的解决方案是使用容器（父级）来检索 totalEvents，然后通过 @Input 将其传递给您的 ngx-swiper-component。

下面是一个例子： changeDetection: ChangeDetectionStrategy.OnPush //很重要

@ViewChild(SwiperDirective) swiperDirectiveRef: SwiperDirective;

ngOnChanges() {
    if (this.swiperDirectiveRef) {
      this.swiperDirectiveRef.setIndex(0);
      this.cdRef.detectChanges();
      if (this.swiperDirectiveRef.swiper()) {
        setTimeout(() => {
          this.swiperDirectiveRef.swiper().lazy.load();
        }, 0);
      }
    }
  }

或者：您可以为此创建一个方法并在您的订阅中调用它：

ngOnInit() {
         this.spinner.show().then( async () => {
          this.data.currentProgress.subscribe(progress => this.progress = progress);
          await this.eventService.fetchEvents();
          }).then(async () => {
            this.data.totalShuffledEvents.subscribe(shuffle => {
            this.totalEvents = shuffle;
            this.refreshSwipper();
           });
          }).then(() => {
            this.spinner.hide();
          });
     }

refreshSwipper() {
if (this.swiperDirectiveRef) {
          this.swiperDirectiveRef.setIndex(0);
          this.cdRef.detectChanges();
          if (this.swiperDirectiveRef.swiper()) {
            setTimeout(() => {
              this.swiperDirectiveRef.swiper().lazy.load();
            }, 0);
          }
        }
}

【讨论】：