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 {}