是伍尚金哇_v

ionic v3采用的是TypeScript写法,页面间跳转的几种方式以及传值之页面堆栈方式(NavController)

电脑版发表于:2020/3/20 10:24

页面堆栈方式(NavController)

跳转页面

导入NavControllerNavParams 导航控制器和参数 并且注入到构造函数,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)


关于TNBLOG
TNBLOG,技术分享。技术交流:群号677373950
ICP备案 :渝ICP备18016597号-1
App store Android
精彩评论
{{item.replyName}}
{{item.content}}
{{item.time}}
{{subpj.replyName}}
@{{subpj.beReplyName}}{{subpj.content}}
{{subpj.time}}
猜你喜欢