ionic3 入门【3】实现页面跳转 亦凉 2022-06-02 04:51 221阅读 0赞 一。页面跳转 (home页跳转到news页) 在home.html中定义一个按钮 <button ion-button (click)="goNews()" >跳转到新闻页面</button> ![20180104103015929][] 在home.ts中 先引入(NewsPage) import { NewsPage } from '../news/news'; HomePage 默认引入NavController,直接使用this.navCtrl.push跳转 export class HomePage { constructor(public navCtrl: NavController) { } goNews(){ // this.navCtrl.push('页面'); this.navCtrl.push(NewsPage); } } 二。页面跳转并传参 (home页跳转到news页) 1. home页面实现跳转并传参数 goNews(){ // this.navCtrl.push('页面'); this.navCtrl.push(NewsPage, { title : '测试传参' }); } 2.在news页面接收home传过来的参数 (1.)利用NavParams的get方法,可以将传进来的页面参数读取出来。 引入NavParams并,并在构造函数添加注入语句, 默认已经引入 import { IonicPage, NavController, NavParams } from 'ionic-angular'; constructor(public navCtrl: NavController, public navParams: NavParams) { } (2.)为NewsPage类添加titleTitle属性,读取参数并赋给titleTitle constructor(public navCtrl: NavController, public navParams: NavParams) { this.titleTitle = this.navParams.get('title'); } 注意: 如果在获取参数时写成了 ` ` this.titleTitle = this.navParams.get(title); 会报出错误: ![SouthEast][] (3.)在模板中利用双花括号 \{ \{titleTitle\}\} 将组件的属性输出到界面上 <ion-header> <ion-navbar> <ion-title>{ {titleTitle}}</ion-title> </ion-navbar> </ion-header> 传参之后页面显示 ![20180104103746975][] [20180104103015929]: /images/20220602/f70ffd18b655491d93a731f29ca8ba97.png [SouthEast]: /images/20220602/9c1fa4fd022a40179392a4ac8d2afec0.png [20180104103746975]: /images/20220602/7ca8a4d4598643ecb40b0839c0e97f70.png
还没有评论,来说两句吧...