ionic2-新建页面&跳转页面（传值）

2017年1月9日 622点热度 0人点赞 0条评论

1.新建new-page页面

1.1在控制栏

ionic g page NewPage

1.2在app.module.ts配置

import { NewPagePage } from '../pages/new-page/new-page';
@NgModule({  declarations: [
    MyApp,
    Hello，
    NewPagePage
  ],  imports: [
    IonicModule.forRoot(MyApp)
  ],  bootstrap: [IonicApp],  entryComponents: [
    MyApp,
    Hello,
    NewPagePage
  ],  providers: []
})

2.从hello页面跳转到new-page页面

方法一：

2.11在hello.html页面添加button

<button class="hello-ionic-btn" (click)="testNewPage()"> <ion-icon name="menu"></ion-icon> </button>

2.12在hello.ts

import { NewPagePage } from '../new-page/new-page';

constructor(public navCtrl: NavController) {

  } testNewPage(){ console.log('点我了'); this.navCtrl.push(NewPagePage,{ item1:'ios-newPage' });
  }

方法二：

2.21在hello.html页面

 <button ion-item [navPush]="nxPage" [navParams]="params"> 点击直接带参数调转 </button>

2.22在hello.ts

import { NewPagePage } from '../new-page/new-page';

nxPage: any = NewPagePage; params: any = {id: 42};

3.在新页面取值

3.1 通过js navCtrl.push传过来的取值

import { NavController,NavParams } from 'ionic-angular';

export class NewPagePage { data:any; constructor(public navCtrl: NavController,public navParams: NavParams) { console.log(this.navParams.data)//打印的是传过来的所有数据 this.data = navParams.get('item1') console.log(this.data);
  }

  ionViewDidLoad(navParams: NavParams) { console.log('Hello NewPagePage Page'); console.log(this.data);
  }

}

2.2 通过页面 [navParams]传过来的取值

export class NewPagePage { data:any; constructor(public navCtrl: NavController,public navParams: NavParams) { this.data = navParams.data console.log(this.data);
  }

  ionViewDidLoad(navParams: NavParams) { console.log('Hello NewPagePage Page'); console.log(this.data);
  }

}