ionic2
Modals

Einfach Modal

Modal ist eine temporäre Benutzeroberfläche, die über Ihrer aktuellen Seite angezeigt wird. Dies wird häufig zum Anmelden, Anmelden, Bearbeiten vorhandener Optionen und Auswählen von Optionen verwendet.

Schauen wir uns ein einfaches Beispiel mit den verwendeten Modalen an. Zunächst erstellen wir ein Projekt für ionische Leere. Lassen Sie uns ein einfaches Modal erstellen, in dem eine Nachricht angezeigt wird, und beenden Sie das Klicken auf die Schaltfläche. Zu diesem Zweck erstellen wir eine Ansicht für unser 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();
  }
}

In diesem Modal wird eine Nachricht angezeigt. Die Modal kann mit Hilfe des View - Controller entlassen Verfahren geschlossen oder „entlassen“ werden.

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

Jetzt erstellen wir unsere Homepage, auf der der ModalController und unser Datenmodell MessagePage importiert werden. Die Methode create von ModalController erstellt modal für unser Datenmodell MessagePage, das zur Steuerung der Variablen myModal gespeichert wird. Die aktuelle Methode öffnet das Modal oben auf unserer aktuellen Seite.

Modal mit Parametern bei Entlassung:

Wir wissen jetzt, wie man einen Modal erstellt. Was aber, wenn wir einige Daten von Modal auf unsere Homepage übertragen möchten. Lassen Sie uns dazu ein Beispiel mit Modal als Register-Seitenübergabeparameter an die übergeordnete Seite betrachten.

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 ruft ein Datenobjekt mit vom Benutzer eingegebenen Werten ab, und die Parameter werden an unsere aktuelle Seite übergeben, wenn die ViewControllers-Methode verworfen wird. Nun werden die Parameter gesendet.

Wie werden die Parameter auf der Startseite abgerufen? Dazu erstellen wir eine Schaltfläche auf der Startseite und rufen bei Klick das Register modal auf. Um den Benutzer anzuzeigen, zeigen wir eine Liste an.

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

Die onDidDismiss- Methode von ViewController wird ausgeführt, wenn ein Modal geschlossen wird. Wenn Daten von modal als Parameter übergeben werden, können wir sie mit der Methode onDidDismiss abrufen. Hier werden die vom Benutzer eingegebenen Daten an die vorhandenen Daten angehängt. Wenn keine Daten als Parameter übergeben werden, ist der zurückgegebene Wert null.

Modal mit Parametern beim Erstellen:

Die Übergabe von Parametern an einen Modal ähnelt der Übergabe von Werten an einen NavController. Dazu ändern wir unsere Liste in home.html, um beim Anklicken eines Listenelements eine Modalität zu öffnen und die erforderlichen Parameter als zweites Argument an die create- Methode zu übergeben.

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

Ähnlich wie bei anderen Ansichten verwenden wir NavParams, um die aus der vorherigen Ansicht gesendeten Daten abzurufen.

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