Ngx-swiper-wrapper 已禁用

Question

我已经将一些数据加载到我的 ngx-swiper-wrapper 中。然而，当这种情况发生时，这个 swiper-button-disabled 被加载到 next-button 和 prev-button 上。我尝试使用 javascript 删除它，但滑动器对象仍然不会滚动。不知道有没有办法refresh/reload获取数据后的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">
...

Answer 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);
          }
        }
}

Ngx-swiper-wrapper 已禁用

Ngx-swiper-wrapper disabled

typescript

swiper

angular