欢迎使用CSDN-markdown编辑器

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