Ionic 4 ion-slides 使用 ngClass 更改活动幻灯片的 css 样式答案

【问题标题】：Ionic 4 ion-slides change css style of the active slide using ngClassIonic 4 ion-slides 使用 ngClass 更改活动幻灯片的 css 样式
【发布时间】：2019-03-13 16:08:42
【问题描述】：

编辑：添加堆栈闪电战：

https://stackblitz.com/edit/ionic-b2r7si

我正在使用以下离子幻灯片：

<ion-slides class="fullWidth" [options]="slideOptsOne" #slideWithNav
  (ionSlideDidChange)="change($event)">
  <ion-slide #status *ngFor="let array of arrays">
    <ion-col>
      {{array}}
    </ion-col>
  </ion-slide>
</ion-slides>

我需要更改当前活动幻灯片的 css 样式，例如加下划线或加粗。我做了一些研究，显然我应该使用[ngClass]=''，但不知道如何使用。

我正在使用以下方法获取活动幻灯片的索引：

change(e) {
    this.slides.getActiveIndex().then(
      (index) => {
        this.currentIndex = index;
        console.log(this.currentIndex);
      }
    )
}

我试过了：

  <ion-slide #status *ngFor="let array of arrays;let i=index;">
      <ion-col [ngClass]="{'activeIndex': currentIndex==array[i]}">
        {{array}}
      </ion-col>
    </ion-slide>

还有activeIndex风格：

.activeIndex{
  font-size: 1.5em;
}

但数组中只有一个元素的样式发生了变化。

【问题讨论】：

标签： ionic-framework ionic4 ng-class ion-slides

【解决方案1】：

将 activeIndex 类设置为currentIndex === i。如果将其设置为 array[i]，您将获得数组的字母而不是您要查找的索引号。

<ion-col [ngClass]="{'activeIndex': currentIndex === i}">
  {{ array }}
</ion-col>

工作stackblitz

【讨论】：

只有第一张幻灯片不会随着 activeIndex css 类而改变。你可以使用 ionSlidesDidLoad() 来处理这个。