离子4离子幻灯片slideOptions第二次忽略

debugcn 发表于 Dev

安托万

我的Ionic 4应用程序有一个奇怪的行为：当我第二次使用幻灯片打开模态时，我的slideOptions被忽略了（第一次正常运行）

这是一些代码

my-card.component.ts：

async openDetail(): Promise<void> {
  const detailModal = await this.modalController.create({
    component: DetailsComponent,
    componentProps: {
      somePros: '...'
    }
  });

  return detailModal.present();
}

details.component.ts：

export class DetailsComponent implements OnInit {

  slideOptions = null;

  ngOnInit() {

    // [...]

    let initialSlide = 0;

    // [...]

    this.slideOptions = { initialSlide };
  }
  ...
}

details.component.html：

<ion-content>

  [...]

  <ion-slides *ngIf="slideOptions" [options]="slideOptions">
    <ion-slide>
      [...]
    </ion-slide>
    [...]
  </ion-slides>
</ion-content>

安托万

显然，我需要更新幻灯片才能使其正常工作

details.component.ts：

export class DetailsComponent implements OnInit {

  slideOptions = null;

  // ===> Get the reference on the slides here <===
  @ViewChild('slides', {static: true}) slides: IonSlides;

  ngOnInit() {

    // [...]

    let initialSlide = 0;

    // [...]

    this.slideOptions = { initialSlide };

    // ===> Update the slides here <===
    this.slides.update();
  }
  ...
}

details.component.html：

<ion-content>

  [...]

  <!-- ===> Add #slides here <=== -->
  <ion-slides #slides *ngIf="slideOptions" [options]="slideOptions">
    <ion-slide>
      [...]
    </ion-slide>
    [...]
  </ion-slides>
</ion-content>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。