Блог

ионный слайдер скрыть кнопку next на последнем слайде и скрыть предыдущую кнопку на первом слайде попробуйте реализовать это с помощью ngIf, но это не работает ionic 4

 <ion-slides #slides>
(...)
</ion-slides>
<button ion-button *ngIf="slides.isBeginning()">prev</button>
<button ion-button *ngIf="slides.isEnd()">Next</button>
  

isBeginning() и isEnd() возвращать обещания, поэтому вам нужно их разрешить. Также мы хотели бы прослушать, когда слайды меняются, мы можем сделать это, например, с помощью доступного метода ionSlideWillChange . Итак, вызывайте функцию, когда слайд собирается измениться, и проверяйте, является ли слайд концом или началом, и скрывайте / отображайте кнопки в соответствии с этим.

 <ion-slides #slides (ionSlideWillChange)="doCheck()">
  

Мы используем вспомогательный элемент из двух логических флагов disablePrevBtn и disableNextBtn , которые мы ставим в качестве условия для кнопок:

  <button ion-button *ngIf="!disablePrevBtn">prev</button>
 <button ion-button *ngIf="!disableNextBtn">Next</button>
  

Нам также нужно использовать ViewChild , чтобы получить ссылку на наш слайд, поэтому импортируйте IonSlides и пометьте его ViewChild :

 import { ViewChild } from '@angular/core';
import { IonSlides } from '@ionic/angular';

// ...

@ViewChild('slides') ionSlides: IonSlides;
  

вероятно, мы захотим пометить disablePrevBtn как изначально true и disableNextBtn как false :

 disablePrevBtn = true;
disableNextBtn = false;
  

И, наконец, функция с двумя обещаниями, которые оба возвращают либо true , либо false в зависимости от случая. На основе этих логических значений мы переключаем логические флаги. который отслеживает слайды и переключает логические значения:

 doCheck() {
  let prom1 = this.ionSlides.isBeginning();
  let prom2 = this.ionSlides.isEnd();

  Promise.all([prom1, prom2]).then((data) => {
    data[0] ? this.disablePrevBtn = true : this.disablePrevBtn = false;
    data[1] ? this.disableNextBtn = true : this.disableNextBtn = false;
  });
}