ionic2
Modals

Utiliser des modaux

Les modaux se glissent en dehors de l'écran pour afficher une interface utilisateur temporaire, souvent utilisée pour les pages de connexion ou d'inscription, la composition des messages et la sélection des options.

import { ModalController } from 'ionic-angular';
import { ModalPage } from './modal-page';

export class MyPage {
  constructor(public modalCtrl: ModalController) {
  }

  presentModal() {
    let modal = this.modalCtrl.create(ModalPage);
    modal.present();
  }
}

REMARQUE: Un modal est un volet de contenu qui survole la page actuelle de l'utilisateur.

Transmission de données via un modal

Les données peuvent être transmises à un nouveau modal via Modal.create() comme second argument. Les données peuvent alors être consultées à partir de la page ouverte en injectant NavParams . Notez que la page, qui s’ouvre en tant que modal, n’a pas de logique "modale" spéciale, mais utilise NavParams différemment d’une page standard.

Première page:

import { ModalController, NavParams } from 'ionic-angular';

export class HomePage {

 constructor(public modalCtrl: ModalController) {

 }

 presentProfileModal() {
   let profileModal = this.modalCtrl.create(Profile, { userId: 8675309 });
   profileModal.present();
 }

}

Deuxième page:

import { NavParams } from 'ionic-angular';
export class Profile {

 constructor(params: NavParams) {
   console.log('UserId', params.get('userId'));
 }

}