离子 3 多个小尺寸模态与一个具有 if 条件的大模态

Question

我应该制作一个类似于LinkedIn个人资料的个人资料页面。用户应该通过多种表格添加一些数据，如工作经验、教育等。我目前正在使用离子 3 框架(带有延迟加载(来开发应用程序。我犹豫是制作一个包含所有表单的模态并在所有表单上使用 *ngIf 来决定要显示的表单，还是制作多个模态，每个模态包含一个表单并分别加载每个模态。哪种解决方案是实用的？

Answer 1

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

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

我不知道你对Ionic了解多少，但我会举一个简单的例子，然后说你需要学习什么才能实现这一目标。

您的页面.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>

你的页面.ts

// 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
}
}
}

如果用户可以在幻灯片中来回移动，并且没有义务完成一个按钮以转到另一个幻灯片，则还可以在幻灯片中使用导航按钮。

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

• 如何使用幻灯片(查看离子幻灯片文档(。
• 如何使用 ViewChild，但这并不重要，因为您唯一会 ViewChild 的想法是为幻灯片创建参考，但很高兴学习。
• 如何在角度中使用表单，以我的方式或使用表单生成器。

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

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

希望这有帮助。