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
文章评论