Ионные 3-х кратные модальные размеры небольшого размера против одного большого модального условия - PullRequest
Новая
       12

Ионные 3-х кратные модальные размеры небольшого размера против одного большого модального условия

0 голосов
/ 24 июня 2018

Я должен сделать страницу профиля похожей на профиль в LinkIn.Пользователи должны добавить некоторые данные - через несколько форм - например, опыт работы, образование и т. Д. В настоящее время я использую ionic 3 Framework (с отложенной загрузкой) для разработки приложения.Я сомневаюсь, стоит ли создавать один модал, содержащий все формы, и использовать * ngIf во всех формах, чтобы решить, какую форму показывать, или создавать несколько модов, каждый из которых содержит форму, и загружать каждый из них отдельно.Какое решение будет практичным?

1 Ответ

0 голосов
/ 25 июня 2018

Я рекомендую третий вариант: страница с 3 слайдами, каждый из которых содержит свою форму.

Вы можете иметь форму на каждом слайде, вы можете контролировать, какой слайд может видеть пользователь, нет потери производительности, вы можете проверять каждую форму отдельно и т. Д.

Я не знаю, как много вы знаете об Ionic, но я приведу простой пример, а затем скажу, что вам нужно изучить, чтобы достичь этого.

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>

yourPage.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 думает только о том, чтобы создать ссылку на слайды, но приятно учиться.
  • Как работать с формами в угловых, как я, или с помощью FormBuilder.

Если вам не нравится эта идея и вы все еще хотите придерживаться своих двух вариантов, я рекомендую использовать параметр ngIf, но вместо ngIf попробуйте использовать ngSwitch.

Использование нескольких модальных режимов может дать вам больше работы, поскольку на странице, представляющей формы, вам нужно будет проверить каждую модальную форму, сохранить пользовательские входные данные где-нибудь и извлечь их, когда вы собираетесь сохранить. Или вы представите модальный режим поверх модального, который может быть немного сложен в управлении, а также будет выполнять всю работу, о которой я упоминал выше.

Надеюсь, это поможет.

...