不可能使用离子载玻片方法(没有 ChangeDetectorRef 的提供程序)

Question

我想使用离子幻灯片方法getActiveIndex((，但是当我导入离子幻灯片作为提供程序时，我有此错误：

NullInjectorError： 没有 ChangeDetectorRef 的提供程序！

我不知道为什么我必须将其添加到提供商。即使我添加这个，我也有另一个提供者：元素参考...

如果你看看我的代码，你能告诉我我是否做错了什么吗？

谢谢！

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

Answer 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; // <----

然后，您可以访问幻灯片并可以调用getActiveIndex((;

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

Answer 2

下面对我有用

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()" >