时间戳

首页 > 解决方案 > 单击时创建一个新的离子载玻片

angular - 单击时创建一个新的离子载玻片

问题描述

我正在创建一个用于提交药物信息的多步骤表单。

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

<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 是它自己的幻灯片，但只有在按下“这是处方药”按钮时才能访问。有没有办法做到这一点？

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

标签： angularionic-framework

解决方案

我们可以锁定滑动到下一张幻灯片，除非按下我们指定的按钮，按下后，我们将滑动到我们想要的任何幻灯片# - 一旦幻灯片转换，我们再次锁定滑动能力（这样用户就不会'不要自己去看——他们去另一张幻灯片的唯一方法是只通过一个按钮）

在此处查看 stackblitz 演示中的 Home 选项卡

home.ts内容如下：

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);

    }
  }

}

home.html是：

<ion-header>
    <ion-navbar>
        <ion-title>Home</ion-title>
    </ion-navbar>
</ion-header>

<ion-content padding>
    <ion-slides>
        <ion-slide>
            <h4>This is the first slide</h4>
            <button type="button" (click)="slideToSlide()">Next</button>
        </ion-slide>
        <ion-slide>
            <h4>This is the second slide</h4>
      <button type="button" (click)="slideToSlide()">Next</button>
        </ion-slide>
        <ion-slide>
            <h4>This is the third slide</h4>
      <button type="button" (click)="slideToSlide()">Next</button>
        </ion-slide>
    </ion-slides>
</ion-content>

推荐阅读