Ngx-swiper-wrapper已禁用

Question

我已经将一些数据加载到我的ngx-swiper-wrapper中。然而，当发生这种情况时，这个禁用的快捷键被加载到next-button和prev-button上。我试着用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">
...

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