ionic2
modals

Modals gebruiken

Modals worden van het scherm geschoven om een tijdelijke gebruikersinterface weer te geven, vaak gebruikt voor inlog- of aanmeldingspagina's, berichtensamenstelling en optieselectie.

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();
  }
}

OPMERKING: Een Modal is een inhoudsvenster dat over de huidige pagina van de gebruiker gaat.

Gegevens doorgeven via een Modal

Gegevens kunnen als tweede argument worden doorgegeven aan een nieuwe modal via Modal.create() . De gegevens kunnen vervolgens worden geopend vanaf de geopende pagina door NavParams injecteren. Merk op dat de pagina, die als een modale is geopend, geen speciale "modale" logica bevat, maar NavParams niet anders gebruikt dan een standaardpagina.

Eerste pagina:

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

export class HomePage {

 constructor(public modalCtrl: ModalController) {

 }

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

}

Tweede pagina:

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

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

}