ionic2
Modals

Modal Simple

Modal est une interface utilisateur temporaire affichée en haut de votre page actuelle. Ceci est souvent utilisé pour la connexion, l'inscription, l'édition des options existantes et la sélection des options.

Examinons un exemple simple avec des modaux utilisés. Pour commencer, nous créons un projet vierge ionique. Laissez-nous créer un modal simple affichant un message et quitter le clic sur le bouton. Pour ce faire, nous créons d'abord une vue pour notre modal.

Message.html

<ion-header>
  <ion-toolbar>
    <ion-title>
      Modal
    </ion-title>
    <ion-buttons start>
      <button (click)="dismiss()">
        <span primary showWhen="ios">Cancel</span>
        <ion-icon name="md-close" showWhen="android,windows"></ion-icon>
      </button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>
<ion-content padding>
  <h1>Modal Without Params is created successfully.</h1>
  <button full (click)="dismiss()"> Exit </button>
</ion-content>

Message.ts

import { Component } from '@angular/core';
import { ViewController } from 'ionic-angular';
@Component({
  templateUrl: 'build/pages/message/message.html',
})
export class MessagePage {
  viewCtrl;
  constructor(viewCtrl: ViewController) {
    this.viewCtrl = viewCtrl;
  }
  dismiss(){
    this.viewCtrl.dismiss();
  }
}

Ce modal affiche un message. Le modal peut être fermé ou «supprimé» à l'aide de la méthode de rejet View controllers.

Home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Modal Example
    </ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
  <button full (click)="openModal()">ModalWithoutParams-Message</button>
</ion-content>

Home.ts

import { Component } from '@angular/core';
import { ModalController } from 'ionic-angular';
import {MessagePage} from '../message/message';
@Component({
  templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
  modalCtrl;
  data;
  constructor(modalCtrl: ModalController) {
    this.modalCtrl = modalCtrl;
    this.data = [{name: "aaa", email: "[email protected]", mobile: "1234567890", nickname: "zzz"},
      {name: "bbb", email: "[email protected]", mobile: "1234567890", nickname: "yyy"},
      {name: "ccc", email: "[email protected]", mobile: "1234567890", nickname: "xxx"}]
  }
  openModal() {
    let myModal = this.modalCtrl.create(MessagePage);
    myModal.present();
  }
}

Nous créons maintenant notre page d'accueil pour importer ModalController et notre modèle de données MessagePage. La méthode de création de ModalController crée un modal pour notre modèle de données MessagePage enregistré pour contrôler la variable myModal. La méthode actuelle ouvre le modal en haut de notre page actuelle.

Modal avec paramètres sur le rejet:

Nous savons maintenant comment créer un modal. Mais que faire si nous voulons transmettre certaines données de modal à notre page d'accueil. Pour ce faire, examinons un exemple avec modal comme registre des paramètres de passage de page à la page parente.

Register.html

<ion-header>
  <ion-toolbar>
    <ion-title>
      Login
    </ion-title>
    <ion-buttons start>
      <button (click)="dismiss()">
        <span primary showWhen="ios">Cancel</span>
        <ion-icon name="md-close" showWhen="android,windows"></ion-icon>
      </button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>
<ion-content padding>
  <ion-list>
    <ion-item>
      <ion-label>Name</ion-label>
      <ion-input type="text" [(ngModel)]="name"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label>Email</ion-label>
      <ion-input type="text" [(ngModel)]="email"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label>Mobile</ion-label>
      <ion-input type="number" [(ngModel)]="mobile"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label>Nickname</ion-label>
      <ion-input type="text" [(ngModel)]="nickname"></ion-input>
    </ion-item>
  </ion-list>
  <button full (click)="add()">Add</button>
</ion-content>

Register.ts

import { Component } from '@angular/core';
import { ViewController } from 'ionic-angular';
@Component({
  templateUrl: 'build/pages/register/register.html',
})
export class ResisterPage {
  viewCtrl;
  name;
  email;
  mobile;
  nickname;
  constructor(viewCtrl: ViewController) {
    this.viewCtrl = viewCtrl;
    this.name = "";
    this.email = "";
    this.mobile = "";
    this.nickname = "";
  }
  dismiss(){
    this.viewCtrl.dismiss();
  }
  add(){
    let data = {"name": this.name, "email": this.email, "mobile": this.mobile, "nickname": this.nickname};
    this.viewCtrl.dismiss(data);
  }
}

Register modal obtient un objet de données avec les valeurs entrées par l'utilisateur et les paramètres sont transmis à notre page en cours sur la méthode de renvoi avec viewControllers. Maintenant, les paramètres sont envoyés.

Alors, comment allons-nous récupérer les paramètres dans la page d'accueil? Pour ce faire, nous créons un bouton sur la page d'accueil et appelons Register modal on click. Pour afficher l'utilisateur, nous affichons une liste.

Home.html

<ion-list>
  <ion-item *ngFor="let datum of data">
    <h1>{{datum.name}}</h1>
  </ion-item>
</ion-list>
<button full secondary (click)="openModalParams()">ModalWithParams-Register</button>

Home.ts

import {ResisterPage} from '../register/register';

  openModalParams(){
    let modalWithParams = this.modalCtrl.create(ResisterPage);
    modalWithParams.present();

    modalWithParams.onDidDismiss((result) =>{
      if(result){
        this.data.unshift(result);
      }
    });
  }

La méthode ViewController onDidDismiss est exécutée chaque fois qu'un modal est fermé. Si les données sont passées en paramètre à partir de modal, nous pouvons les récupérer en utilisant la méthode onDidDismiss. Ici, les données saisies par l'utilisateur sont ajoutées aux données existantes. Si aucune donnée n'est passée en paramètre, la valeur renvoyée sera nulle.

Modal avec paramètres sur create:

Passer des paramètres à un modal est similaire à la manière dont nous transmettons des valeurs à un NavController. Pour ce faire, nous modifions notre liste dans home.html pour ouvrir un modal en cliquant sur un élément de la liste et en transmettant les paramètres requis comme second argument à la méthode create .

Home.html

 <ion-list>
    <ion-item *ngFor="let datum of data" (click)="openModalwithNavParams(datum)">
      <h1>{{datum.name}}</h1>
    </ion-item>
  </ion-list>

Home.ts

import {EditProfilePage} from '../edit-profile/edit-profile';

  openModalwithNavParams(data){
    let modalWithNavParams = this.modalCtrl.create(EditProfilePage,{Data: data});
    modalWithNavParams.present();
  }

Semblable à d'autres vues, nous utilisons NavParams pour récupérer les données envoyées depuis la vue précédente.

Edit-Profile.html

<ion-header>
  <ion-toolbar>
    <ion-title>
      Login
    </ion-title>
    <ion-buttons start>
      <button (click)="dismiss()">
        <span primary showWhen="ios">Cancel</span>
        <ion-icon name="md-close" showWhen="android,windows"></ion-icon>
      </button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>
<ion-content padding>
  <h2>Welcome {{name}}</h2>
  <ion-list>
    <ion-item>
      <ion-label>Email</ion-label>
      <ion-input type="text" value={{email}}></ion-input>
    </ion-item>
    <ion-item>
      <ion-label>Mobile</ion-label>
      <ion-input type="number" value={{mobile}}></ion-input>
    </ion-item>
    <ion-item>
      <ion-label>Nickname</ion-label>
      <ion-input type="text" value={{nickname}}></ion-input>
    </ion-item>
  </ion-list>
  <button full (click)="dismiss()">Close</button>
</ion-content>

Edit-Profile.ts

import { Component } from '@angular/core';
import { ViewController, NavParams } from 'ionic-angular';
@Component({
  templateUrl: 'build/pages/edit-profile/edit-profile.html',
})
export class EditProfilePage {
  viewCtrl;
  navParams;
  data;
  name;
  email;
  mobile;
  nickname;
  constructor(viewCtrl: ViewController, navParams: NavParams) {
    this.viewCtrl = viewCtrl;
    this.navParams = navParams;
    this.data = this.navParams.get('Data');
    this.name = this.data.name;
    this.email = this.data.email;
    this.mobile = this.data.mobile;
    this.nickname = this.data.nickname;
    
  }
  dismiss(){
    this.viewCtrl.dismiss();
  }
}