ionic3 入门【3】实现页面跳转

亦凉 2022-06-02 04:51 277阅读 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