ionic2
модальности
Поиск…
Простые модальные
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();
}
}
Этот модальный отображает сообщение. Модаль может быть закрыт или «отклонен» с помощью метода уклонения диспетчера View.
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();
}
}
Теперь мы создаем нашу домашнюю страницу, импортируя ModalController и нашу модель MessagePage. Способ создания ModalController создает модальный для нашей модели данных MessagePage, который сохраняется для управления переменной myModal. Существующий метод открывает модальность поверх нашей текущей страницы.
Modal с параметрами при увольнении:
Теперь мы знаем, как создать модальный. Но что, если мы хотим передать некоторые данные из модального на нашу домашнюю страницу. Для этого давайте рассмотрим пример с модальными параметрами передачи страницы регистрации на родительскую страницу.
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);
}
}
Регистрация modal получает объект данных со значениями, введенными пользователем, и параметры передаются на нашу текущую страницу при увольнении с помощью метода отклонения viewControllers. Теперь параметры отправляются.
Итак, как мы собираемся восстановить параметры на домашней странице? Для этого мы создаем кнопку на домашней странице и вызываем «Зарегистрировать модальный клик». Чтобы отобразить пользователя, мы показываем список.
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);
}
});
}
Метод ViewController onDidDismiss выполняется, когда модальный объект закрыт. Если данные передаются как параметр из модального, то мы можем получить его с помощью метода onDidDismiss. Здесь данные, введенные пользователем, добавляются к существующим данным. Если данные не передаются как параметр, возвращаемое значение будет равно нулю.
Модальный с параметрами для создания:
Передача параметров в модальную форму аналогична тому, как мы передаем значения в NavController. Для этого мы изменяем наш список в home.html, чтобы открыть модальный щелчок по элементу списка и передать необходимые параметры в качестве второго аргумента методу 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();
}
Подобно другим представлениям, мы используем NavParams для извлечения данных, отправленных из предыдущего представления.
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();
}
}