消除引數的模態

我們現在知道如何建立模態。但是如果我們想將一些資料從 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。