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