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

 

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);
  }

}

4.若是用git提交，则须要输入下面进行添加（全部一块儿添加后缀'.')

 git add .