离子滑块隐藏上一张幻灯片中的下一个按钮 ionic 4

Question

离子滑块在最后一张幻灯片中隐藏下一个按钮并在第一张幻灯片中隐藏上一个按钮尝试使用 ngIf 实现此功能，但它不起作用 ionic 4

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

Answer 1

isBeginning()并isEnd()返回承诺，因此您需要解决这些问题。我们还想在幻灯片更改时收听，例如，我们可以使用 available 方法来做到这一点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;

最后是带有两个 promise 的函数，它们都返回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;
  });
}