ionic2 （一） Modals 組件踩坑

ionic2 （一）

Modals 組件踩坑

最近在使用ionic2做項目其中用到了Modals組件，開發過程中發現文檔不夠詳細踩了不少坑，在這裏跟大家分享一下希望可以幫到大家

---

Modals組件的基本用法

官方文檔：http://ionicframework.com/docs/v2/components/#modals
中文文檔：
https://yanxiaodi.gitbooks.io/ionic2-guide/content/components/modals.html
Modals的具體使用，git上的例子是在引用頁面直接引入使用，這裏說一下我的用法，在新建了一個頁面模板

modals.ts如下：

import { Component } from '@angular/core';
import { NavParams,ViewController } from 'ionic-angular';
@Component({
  templateUrl: 'modals.html'
})
export class modals { 
    constructor(public params: NavParams,
    public viewCtrl: ViewController) { 
    } 
    dismiss() {//去除模態框方法
    this.viewCtrl.dismiss();
  }
}

app.module.ts中定義模塊

import { modals } from '../pages/modal/modals';
...
@NgModule({
  declarations: [
  ...
  modals
  ...
  ]
  })

然後在需要引用的頁面引入即可

import { ModalController } from 'ionic-angular';
import { modals} from '../modal/modals';
...
export class MyPage { 
    constructor(public modalCtrl: ModalController) { 
    } 

    presentModal() {//創建模態框方法
        let modal = this.modalCtrl.create(Modals);     
        modal.present(); 
    } 
}

Modals 參數配置

create(component, data, opts)　創建一個模態框，配置參數如下：

參數	類型	參數說明
component	object	模態框視圖
data	object	要傳遞到模式視圖的數據參數
opts	object	模態框配置選項

opts 選項配置參數如下：

選項	類型	參數說明
showBackdrop	boolean	是否顯示背景。默認爲true。
enableBackdropDismiss	boolean	是否顯示遮罩層。默認爲true。
cssClass	string	自定義樣式的class，用空格分隔。