消除参数的模态
我们现在知道如何创建模态。但是如果我们想将一些数据从 modal 传递到我们的主页呢?为此,让我们看看一个示例,其中模态为 Register 页面传递参数到父页面。
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);
}
}
注册模式使用用户输入的值获取数据对象,并使用 viewControllers dismiss 方法将参数传递给我们当前的页面。现在发送参数。
那么我们如何在主页中检索参数呢?为此,我们在主页上创建一个按钮,并在单击时调用注册模式。为了显示用户,我们正在显示一个列表。
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 方法就会被执行。如果数据作为参数从 modal 传递,那么我们可以使用 onDidDismiss 方法检索它。此处,用户输入的数据将附加到现有数据中。如果没有数据作为参数传递,则返回的值将为 null。