ionic3 导航的应用（页面跳转与参数传递）

about.html(跳转页面)

<ion-content padding>
    <ion-list>
      <ion-item *ngFor="let he of contacts" (click)="onClick(event,he)">
        <ion-avatar item-left>
          <img src="../assets/imgs/{{he.img}}.jpg" alt=""/>
        </ion-avatar>
        <h3 class="mymargin">{{he.name}}</h3>
        <p>{{he.text}}</p>
      </ion-item>

    </ion-list>
</ion-content>

about.ts（跳转页面）

 

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

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

  constructor(public navCtrl: NavController) {

  }
  public contacts=[
    {"img":"bg2","name":"麦兜","text":"好嗨哦"},
    {"img":"bg3","name":"小胖","text":"好嗨哦"},
    {"img":"bg5","name":"小猪佩奇","text":"好嗨哦"}
  ];
  onClick(event,he){
        this.navCtrl.push('DetailPage',{test : he});
  }

}

 

跳转到的页面（使用ionic g page detail 指令生成跳转到的新页面）

修改 app.module.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 { DetailPageModule } from '../pages/detail/detail.module';

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),
    DetailPageModule//添加这个
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    AboutPage,
    ContactPage,
    RegisterPage,
    HomePage,
    TabsPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

detail.ts接收变量

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

@IonicPage()
@Component({
  selector: 'page-detail',
  templateUrl: 'detail.html'
})
export class DetailPage  {
  data:any;
  constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.data = navParams.get('test');
  }



}

detail.html显示

<ion-header>
  <ion-navbar>
    <ion-title>detail</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  {{data.name}}
</ion-content>

好了整个流程就是这样的！鼓掌！！！