ionic3 Modal组件

 Modal组件主要用来弹出一些临时的框，如登录，注册的时候用

弹出页面html页面

<button ion-button small outline  color="he" (click)="register()">还没有账号，点击注册</button>

弹出页面的ts文件

import { Component } from '@angular/core';
import { ModalController } from 'ionic-angular';
import { RegisterPage } from '../register/register';//需要弹出的页面

@Component({
  selector: 'page-contact',
  templateUrl: 'contact.html'
})
export class ContactPage {

  constructor(public modalCtrl: ModalController) {

  }

  register(){
    let modal = this.modalCtrl.create(RegisterPage);
    modal.present();
  }
}

被弹出页面的html（页面上设置关闭按钮用来关闭弹出页dismiss）

<ion-header>
  <ion-navbar>
    <ion-title>用户注册</ion-title>
    <ion-buttons end>
      <button ion-button clear (click)="dismiss()">
        <span showWhen="ios">取消</span>
        <ion-icon name="md-close" showWhen="android"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>

</ion-header>

<ion-content padding>

</ion-content>

被弹出页面的ts文件（用ViewController来关闭当前弹出页面）

import { Component } from '@angular/core';
import { ViewController } from 'ionic-angular';

@IonicPage()
@Component({
  selector: 'page-register',
  templateUrl: 'register.html'
})
export class RegisterPage {

  constructor(public viewCtrl: ViewController) {
  }

  dismiss(){
    this.viewCtrl.dismiss();
  }

}

弹出页面是新生成的组件的话，记得修改app.moudle.ts文件，添加如下文件

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';

import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
//引入新建的页面
import { RegisterPage } from '../pages/register/register';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

@NgModule({
  declarations: [
    MyApp,
    AboutPage,
    ContactPage,
    RegisterPage,//添加
    HomePage,
    TabsPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)

  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    AboutPage,
    ContactPage,
    RegisterPage,//添加
    HomePage,
    TabsPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}