Question

我正在一个Ionic4项目中，我有2个组件，第一个是我需要向用户展示的一些幻灯片的外壳，最初所有内容都在单个html上，但是我需要进行组件化，现在，我已经拥有所有幻灯片的内部组件，尽管我可以在DOM中看到所有幻灯片，但该滑块仅显示第一张幻灯片

这是主要的HTML

<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons slot="start" *ngIf="pageIndex > 0">
      <ion-button (click)="prev()"><ion-icon slot="end" name="arrow-back"></ion-icon></ion-button>
    </ion-buttons>
    <ion-buttons slot="start" *ngIf="pageIndex === 0">
      <ion-button (click)="close()"><ion-icon slot="end" name="close"></ion-icon></ion-button>
    </ion-buttons>
    <ion-title class="ion-text-center">
      {{getPageTitle()}}
    </ion-title>
    <ion-buttons slot="end">
      <ion-button (click)="next()"><ion-icon slot="end" name="arrow-forward"></ion-icon></ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>

  <ion-slides #signupSlider
              (ionSlideNextStart)="startDragging($event, 1)"
              (ionSlidePrevStart)="startDragging($event, -1)"
              (ionSlideNextEnd)="slideChanged()"
              (ionSlidePrevEnd)="slideChanged()"
              (ionSlideDidChange)="slideChanged()">
    <app-generic-form #genericForm [associateUid]="associateUid" [operatorUid]="operatorUid"></app-generic-form>

  </ion-slides>
  <ion-fab vertical="bottom" horizontal="start" slot="fixed">
    <ion-fab-button (click)="close()">
      <ion-icon name="close"></ion-icon>
    </ion-fab-button>
  </ion-fab>
</ion-content>

在这里，我尝试从主要组件重新加载滑块，但在所有情况下，滑块仅显示第一张幻灯片

@ViewChild('signupSlider', {static: true}) formSlider;
ionViewDidEnter() {
    this.formSlider.update();
    this.formSlider.getSwiper()
      .then((swiper) => {
        swiper.update();
      });
  }

app-generic-form的定义是这样的（表单本身更复杂，但这是一个示例）

<!--PAGE ONE-->
<ion-slide style="overflow-y: scroll;">
  <ion-list lines="full">
    <form [formGroup]="slides[0]">
      <ion-item>
        <ion-label position="stacked">Nombre experiencia/producto</ion-label>
        <ion-input formControlName="expName" type="text" maxlength="30" [(ngModel)]="experienceModel.name"></ion-input>
      </ion-item>
    </form>
  </ion-list>
</ion-slide>
<!--NORMAS Y RECOMENDACIONES-->
<ion-slide style="overflow-y: scroll;">
  <ion-list lines="full">
    <form [formGroup]="slides[1]">
      <ion-item>
        <ion-label position="stacked">Nombre mascota</ion-label>
        <ion-input formControlName="expName" type="text" maxlength="30" [(ngModel)]="experienceModel.name"></ion-input>
      </ion-item>
    </form>
  </ion-list>
</ion-slide>
<!--DETALLES EXPERIENCIA-->
<ion-slide>
  <ion-list lines="full">
    <form [formGroup]="slides[2]">
      <ion-item>
        <ion-label position="stacked">Nombre papa</ion-label>
        <ion-input formControlName="expName" type="text" maxlength="30" [(ngModel)]="experienceModel.name"></ion-input>
      </ion-item>
    </form>
  </ion-list>
</ion-slide>
<!--UBICACION-->
<ion-slide>
  <ion-list lines="full">
    <form [formGroup]="slides[3]">
      <ion-item>
        <ion-label position="stacked">Nombre otro</ion-label>
        <ion-input formControlName="expName" type="text" maxlength="30" [(ngModel)]="experienceModel.name"></ion-input>
      </ion-item>
    </form>
  </ion-list>
</ion-slide>

最后，我的slider.el的内容是这个，因为您可以看到所有幻灯片，但是滑块仅显示第一张幻灯片

令我困惑的一件事是，调用此方法时，它会从滑块返回正确的索引

slideChanged() {
    this.formSlider.getActiveIndex()
        .then((index) => {
          this.genericComp.onIndexChanged.emit(index);
          this.pageIndex = index;
        });
  }

已经检查过了，但是似乎情况并非如此，因为当使用单个html时整个页面都工作正常，有什么想法吗？ Ionic : Ion-slides- Only First Slide appearing

离子幻灯片无法从内部组件中获取所有幻灯片

0 个答案: