ionic v3采用的是TypeScript写法,页面间跳转的几种方式以及传值之页面堆栈方式(NavController)
电脑版发表于:2020/3/20 10:24
页面堆栈方式(NavController)
跳转页面
导入NavController和NavParams 导航控制器和参数 并且注入到构造函数,typescript的构造函数为constructor
import { NavController , NavParams } from 'ionic-angular';export class HomePage {
constructor(public navCtrl: NavController ,
public navParams : NavParams ) {}
//定义一个函数,用于跳转
openNewPage(){
this.navCtrl.push(xxx,{ //xxx代表跳转到的页面的类名称(双引号括起来
"id" : 1,
"name" : "Neo" //此处为传递的参数 也可以传递对象 这里以传递固定参数为例
})
}
}跳转到的页面(目的页面)
这个页面用到取出参数所以导入NavParams参数控制器 并且注入到构造函数,typescript的构造函数为constructor
import { NavParams } from 'ionic-angular';export class NewHome{
id : number; // 声明变量
name : string;
constructor(public navParams : NavParams ) {
// 类似键值对获取传递过来的参数
this.id = this.navParams.get('id');
this.name = this.navParams.get('name');
}
}好了这一期的页面堆栈方式(NavController) ionic的页面跳转传值就先弄到这了,下期讲一下
模态化窗口的形式(ModalController)
