ionic2
Moduły

Prosty modalny

Modalny to tymczasowy interfejs użytkownika wyświetlany na górze bieżącej strony. Jest to często używane do logowania, rejestracji, edycji istniejących opcji i wybierania opcji.

Spójrzmy na prosty przykład z zastosowanymi modami. Na początek tworzymy jonowy blank projekt. Stwórzmy prosty modal wyświetlający komunikat i wyjdź po kliknięciu przycisku. Aby to zrobić, najpierw tworzymy widok dla naszego modalu.

Wiadomość.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();
  }
}

Ten moduł wyświetla komunikat. Modal można zamknąć lub „odrzucić”, korzystając z metody zwalniania kontrolerów widoku.

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

Teraz tworzymy naszą stronę główną importującą ModalController i nasz model danych MessagePage. Metoda tworzenia ModalController tworzy modal dla naszego modelu danych MessagePage, który jest zapisywany w celu sterowania zmienną myModal. Obecna metoda otwiera modal na górze naszej bieżącej strony.

Modal z parametrami przy odrzuceniu:

Teraz wiemy, jak stworzyć modal. Ale co, jeśli chcemy przekazać niektóre dane z modalu na naszą stronę główną. Aby to zrobić, przyjrzyjmy się przykładowi modalnemu, jak Zarejestruj stronę przekazującą parametry do strony nadrzędnej.

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

Zarejestruj modal pobiera obiekt danych z wartościami wprowadzonymi przez użytkownika, a parametry są przekazywane do naszej bieżącej strony przy zwalnianiu za pomocą metody zwrócenia viewControllers. Teraz parametry są wysyłane.

Jak więc odzyskamy parametry na stronie głównej? Aby to zrobić, tworzymy przycisk na stronie głównej i wywołujemy rejestrację modalną po kliknięciu. Aby wyświetlić użytkownika, wyświetlamy listę.

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

Metoda ViewController onDidDismiss jest wykonywana za każdym razem, gdy modal jest zamknięty. Jeśli dane są przekazywane jako parametr z modalu, możemy je odzyskać za pomocą metody onDidDismiss. Tutaj dane wprowadzone przez użytkownika są dołączane do istniejących danych. Jeśli jako parametr nie zostaną przekazane żadne dane, zwrócona wartość będzie zerowa.

Modalny z parametrami przy tworzeniu:

Przekazywanie parametrów do modalu jest podobne do tego, w jaki sposób przekazujemy wartości do NavController. Aby to zrobić, zmieniamy naszą listę w home.html, aby otworzyć modal po kliknięciu elementu listy i przekazaniu wymaganych parametrów jako drugiego argumentu do metody 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();
  }

Podobnie jak w innych widokach, korzystamy z NavParams, aby odzyskać dane wysłane z poprzedniego widoku.

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