ionic3.x - 建立頁面 （page）

建立頁面：在項目根目錄下執行  ionic g page [pageName]

在 app.module.ts 中引入

 

//頁面 自定義的組件

import { AboutPage } from '../pages/about/about';

import { ContactPage } from '../pages/contact/contact';

import { HomePage } from '../pages/home/home';

import { TabsPage } from '../pages/tabs/tabs';

import { NewsPage } from "../pages/news/news"

@NgModule({

  declarations: [   /*申明組件*/

    MyApp,

    AboutPage,

    ContactPage,

    HomePage,

    TabsPage,

    NewsPage

  ],

  imports: [  /*引入的模塊 依賴的模塊*/

    BrowserModule,

    ComponentsModule,

    IonicModule.forRoot(MyApp)

  ],

  bootstrap: [IonicApp],  /*啓動的模塊*/

  entryComponents: [   /*配置不會在模板中使用的組件*/

    MyApp,

    AboutPage,

    ContactPage,

    HomePage,

    TabsPage,

    NewsPage

  ],

  providers: [   /*配置服務*/

    StatusBar,

    SplashScreen,

    {provide: ErrorHandler, useClass: IonicErrorHandler}

  ]

})

export class AppModule {}

 

---

 

頁面跳轉：

1. 直接在要跳轉的頁面使用ionic 的 NavController

step1： 引入 page

step2:  調用 this.navCtrl.push(pageName)    pageName -- page 的類名

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

import { NewsPage } from '../news/news'

@Component({

  selector: 'page-home',

  templateUrl: 'home.html'

})

export class HomePage {

  constructor(public navCtrl: NavController) {

  }

  goNews() {

    this.navCtrl.push(NewsPage)

  }

}