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，用空格分隔。