Javascript Ionic 3多个小尺寸模态与if条件下的一个大模态

我应该制作一个类似linkedIn的个人资料页面。用户应该通过多种形式添加一些数据，如工作经历、教育等。我目前正在使用ionic 3 framework（带lazyload）开发该应用程序。我犹豫是制作一个包含所有表单的模态并在所有表单上使用*ngIf来决定显示哪个表单，还是制作多个模态，每个模态包含一个表单并分别加载每个表单。哪种解决方案可行

我推荐第三种选择：一个包含3张幻灯片的页面，每张幻灯片包含不同的表单

您可以在每张幻灯片中包含一个表单，您可以控制用户可以看到的幻灯片，不会降低性能，您可以单独验证每个表单，等等

我不知道你们对爱奥尼亚了解多少，但我会举一个简单的例子，然后说你们需要学习什么才能达到这个目的

yourPage.html：

<ion-content>
  <ion-slides>
    <ion-slide>
      <form [formGroup]="firstForm">
        <ion-list>
          <ion-item>
            <ion-label stacked>Name</ion-label>
            <ion-input formControlName="name"></ion-input>
          </ion-item>
        </ion-list>
        <button ion-button block round (click)="goToNextForm()">Next Form</button>
      </form>
    </ion-slide>
    ... <!-- Your two other slides -->
  </ion-slides>
</ion-content>

如果用户可以在幻灯片中来回移动，也可以在幻灯片中设置导航按钮，如果用户没有义务完成一个按钮，就可以转到另一个按钮

要实现这一点，您需要知道：

• 如何使用幻灯片（查看爱奥尼亚幻灯片文档）
• 如何使用ViewChild，但这并不重要，因为ViewChild的唯一用途是为幻灯片创建参考，但学习起来很好
• 如何使用angular中的表单，以我所使用的方式或使用FormBuilder

如果你不喜欢这个想法，并且仍然想坚持你的两个选项，我建议使用ngIf选项，但是不要使用ngIf，尝试使用ngSwitch

使用多个模态可以帮助您完成更多的工作，因为在显示表单的页面中，您需要验证每个模态表单，将用户输入数据保存在某个位置，并在保存时检索它。或者你会在模态上演示模态，这可能会有点难以控制，而且会有我上面提到的所有工作

---

希望这能有所帮助。

我建议您使用第一个选项*ngif，因为这将在同一组件中使用，而如果您创建模式，则必须定义与之关联的不同组件。

// You'll need ViewChild to reference the slide component
import { Component, ViewChild } from '@angular/core';
// removed Navcontroller and navParams because on't know if you need them
import { Slides, IonicPage } from 'ionic-angular';
// i don't use formBuilder
import { Validators, FormControll, FormGroup } from '@angular/forms';

@IonicPage()
@Component({
  selector: 'page-your-page',
  templateUrl: 'yourPage.html'
})
export class YourPage {
  // You'll need this to reference the slides so you can controll them
  @ViewChild(Slides) slides: Slides;

  // i'll create just the first form
  public firstForm: FormGroup = new FormGroup({
    name: new FormControll('', Validators.required)
  });
  constructor(){}

  // in this lifecycle hook i'll block the user interaction with the slides
  // so it can't swipe the slides with gestures
  ionViewDidLoad = () => this.slides.lockSwipes(true);

  // if the form is valid i'll send the user to the next form
  goToNextForm = () => {
    if(this.firstForm.valid) {
      // save your form data or do whatever you need to do with the user input
      // then unblock the swipes, swipe to the next form and block the swipe again
      this.slides.lockSwipes(false);
      this.slides.slideNext();
      this.slides.lockSwipes(true);
    } else {
      // the form is invalid, do what you need to do
    }
  }
}