Question

我正在创建一个多步骤的离子表格，用于提交有关药物的信息。

以前，这是一个很大的形式，但我希望它看起来不那么混乱和冗长。我正在使用离子幻灯片对表单进行建模，并且我希望能够仅在单击按钮时使其中一张幻灯片可用。我怎样才能做到这一点？到目前为止，这是我的代码：

<ion-content>
    <ion-slides>
        <ion-slide>
            <h4>Tell us about your medication</h4>
        </ion-slide>
        <ion-slide>
            <form id="addMed" #form="ngForm" (ngSubmit)="addMed(form)">
                       ```
                       some code
                        ```
            </form>
        </ion-slide>
        <ion-slide>
            <form>
                       ```
                       some code
                        ```
                <ion-button expand="full" (click)="toggleRX()">This is a prescription medication</ion-button>
                    <div *ngIf=isRX>
                        <h4>Prescription Information</h4>

                       ```
                       some code
                        ```
                    </div>
            </form>
        </ion-slide>
    </ion-slides>

我希望* ngIf div是它自己的幻灯片，但是只有在按下“这是处方药”按钮时才能访问。有办法吗？

（如果有人有任何资源，我也想了解更多有关带形式的离子幻灯片的信息，但这只是一个奖励）

Answer 1

除非按下指定的按钮，否则我们可以锁定滑动到下一张幻灯片，按下后，我们将滑到我们想要的任何幻灯片＃上，并且一旦切换了幻灯片，我们就会再次锁定可滑动性（这样，用户不会自己去看它-转到另一张幻灯片的唯一方法是仅通过按钮）

检查demo on stackblitz here

中的“主页”标签

home.ts 的内容如下：

str.to.int

home.html 是：

import { Component, ViewChild } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Slides } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  @ViewChild(Slides) slides: Slides;

  slideOpts;
  constructor(public navCtrl: NavController) {
    this.slideOpts = {
      effect: 'flip'
    };
  }

  ionViewDidEnter() {
    //lock manual swipe for main slider
    this.slides.lockSwipeToNext(true);
    this.slides.lockSwipeToPrev(true);
  }

  slideToSlide() {
    if (this.slides.getActiveIndex() + 1 === this.slides.length()) {
      this.slides.slideTo(0);
    } else {
      this.slides.lockSwipeToNext(false);
      this.slides.slideTo(this.slides.getActiveIndex() + 1);
      this.slides.lockSwipeToNext(true);

    }
  }

}

点击创建新的离子幻灯片

1 个答案: