ionic-Modal

最新推荐文章于 2020-07-31 10:25:36 发布

weixin_34185364

最新推荐文章于 2020-07-31 10:25:36 发布

阅读量117

点赞数

文章标签： python

原文链接：https://my.oschina.net/u/2612473/blog/752736

版权

2019独角兽企业重金招聘Python工程师标准>>>

假如在contact.html页面上点击弹出模态框

假如在contact.html页面上点击弹出模态框
首先在html页面上加click事件

<button (click)="openRegisterPage()" outline>你还没有账户，请注册</button>

然后在contact.ts页面引入

import {NavController,LoadingController,AlertController,ToastController,ModalController } from 'ionic-angular';
import {Register} from '../contact/register';//注册页面
并在构造函数中写 constructor( public modalCtrl: ModalController) {}

写点击的事件显示模态框

openRegisterPage(){
let modal = this.modalCtrl.create(Register);
modal.present();
}

新建register.html 及 register.ts 页面

register.ts 里面引入
import {Component} from '@angular/core';

@Component({
templateUrl: 'build/pages/contact/register.html'
})
export class Register {}

<ion-content padding>
pages
</ion-content>

下面是关闭按钮使用
在注册页面中点击关闭
HTML页面
<ion-toolbar>
   <ion-title>用户注册</ion-title>
   <ion-buttons start>
       <button (click)="dismiss()">取消</button>
   </ion-buttons>
</ion-toolbar>
<ion-content padding></ion-content>
ts页面
首先引入ViewController
import {ViewController} from 'ionic-angular';
然后
export class Register {
constructor(public viewCtrl: ViewController) {}
   dismiss(){
this.viewCtrl.dismiss();
   }
}