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 .  


原文链接:https://my.oschina.net/u/2365397/blog/783341

欢迎留言