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)

  }

}