ionic创建modal页面

点击性别跳转到性别选择modal页面

1. 创建性别选择modal 页面

ionic g page mine-input

image.png

2. 在app.module.ts中注册

import  { MineInputGenderPageModule } from '../pages/mine-input-gender/mine-input-gender.module';
添加到imports中：
@NgModule({
    declarations: [
        MyApp
    ],
    imports: [MineInputGenderPageModule ],
});

3. 在父页面module.ts中注册

entryComponents: [
    MineInputPage,
  ]

image.png

4. 在父页面导入modal

import { IonicPage, NavController,ModalController } from 'ionic-angular';
constructor(
    public navCtrl: NavController,
    public   storage: Storage,
    publi   httpser: HttpSerProvider,
    public   popser: PopSerProvider,
    public   utils: UtilsProvider,
    public  modalCtrl: ModalController,
) {}

5. 测试

//性别选择页面
goMineGenderPage(){
  let  that = **this**;
  //不带参数
  let  genderModal = **this**.modalCtrl.create(MineInputGenderPage);
  //带参数
  let  genderModal = **this**.modalCtrl.create(MineInputGenderPage,{item:item});
  genderModal.onDidDismiss(data=>{
    let   _page_data = that.page_data;
    _page_data.gender = data.value;
    _page_data.gender_str = data.gender;
    that.page_data = _page_data;
});
genderModal.present();
}