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

一。页面跳转 (home页跳转到news页)
在home.html中定义一个按钮

<button ion-button (click)="goNews()" >跳转到新闻页面</button>

在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);

会报出错误：

(3.)在模板中利用双花括号 {{titleTitle}} 将组件的属性输出到界面上

<ion-header>
  <ion-navbar>
    <ion-title>{{titleTitle}}</ion-title>
  </ion-navbar>
</ion-header>

传参之后页面显示