Блог

Я хочу использовать метод ion-slides getActiveIndex(), но когда я импортирую ion-slides в качестве поставщика, у меня возникает эта ошибка :

NullInjectorError: нет поставщика для ChangeDetectorRef!

Я не знаю, почему я должен добавлять это к поставщикам. Даже если я добавлю это, у меня есть другой поставщик: ElementRef…

Если вы посмотрите на мой код, не могли бы вы сказать мне, делаю ли я что-то не так?

Спасибо!

liste.page.ts :

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

@Component({
  selector: 'app-liste',
  templateUrl: './liste.page.html',
  styleUrls: ['./liste.page.scss'],
})

export class ListePage {

  constructor(private ionSlides: IonSlides) { }

  slideChanged() {
     console.log(this.ionSlides.getActiveIndex());
    }

}
  

liste.page.html:

 <ion-slides [options]="sliderConfig" (ionSlideTransitionEnd)="slideChanged()">
  <ion-slide *ngFor="let item of items; let i = index">
   {{item.name}}
  </ion-slide>
</ion-slides
  

Ионная информация:

 ionic (Ionic CLI)             : 4.9.0 
Ionic Framework               : @ionic/angular 4.1.2
@angular-devkit/build-angular : 0.13.6
@angular-devkit/schematics    : 7.2.4
@angular/cli                  : 7.3.6
@ionic/angular-toolkit        : 1.4.1
  

В вашем liste.page.html использовать:

 <ion-slides pager="true" #slides>
  

Затем вы можете ссылаться на него в своем файле liste.page.ts с:

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

[...] 

export class ListePage {
@ViewChild('slides', { read: IonSlides }) slides: IonSlides; // <----
  

Тогда у вас есть доступ к slides и вы можете вызвать getActiveIndex();

 slideChanged() {
  console.log(this.slides.getActiveIndex());
}
  

Ниже сработало для меня

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

[...] 

export class ListePage {
  @ViewChild('sliderRef', { static: true }) slides: IonSlides;
  
   slideChanged(){
    this.slides.getActiveIndex().then((val) =>{
      console.log(val);
   });  

 <ion-slides #sliderRef pager="true" [options]="slideOpts" (ionSlideDidChange)="slideChanged()" >