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 .