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

最新推荐文章于 2025-05-31 17:02:33 发布

原创最新推荐文章于 2025-05-31 17:02:33 发布 · 6.7k 阅读

2 ·

CC 4.0 BY-SA版权

Ionic 专栏收录该内容

18 篇文章

订阅专栏

本文介绍如何在Ionic应用中实现页面间的跳转及参数传递。通过在home.html定义按钮并在home.ts中使用NavController进行页面跳转。此外，还介绍了如何通过NavController向目标页面传递参数，并在目标页面中通过NavParams获取这些参数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一。页面跳转 (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>

传参之后页面显示