Ionic3项目开发——页面跳转与参数传递

ionic3在页面跳转以及参数传递上做了修改。但不了解ionic或者刚接触的新手就难以理解，即使是官方提供的教程(https://ionicframework.com/docs/api/navigation/IonicPage/)也并不详细，还有一些坑存在。

这里我做一下简单的演示。在home.html页面上点击一个按钮，执行home.ts的一段函数，最后传递一个变量并显示在about.html中。按照我们习惯的研发思路。

home.html页面

在home.html页面上添加一个测试的按钮，触发一个js函数logOut_1()。然后执行到home.ts文件中。

  <button ion-button block (click)="logOut_1()">
    测试
  </button> 

home.ts页面

在home.ts页面中处理出发的函数，从下面可以看到，就是将页面转向AboutPage，并向页面发送一个变量名为test、值为aaa的变量。这里需要引入NavController。

logOut_1(){
    this.navCtrl.push('AboutPage', {
        test : "aaa"
    });
}

AboutPage配置

首先确保每个AboutPage下面有四个文件，分别是：

about.html
about.module.ts
about.scss
about.ts

有些情况下可能没有about.module.ts这时需要手动添加，或者自己在命令行下执行 ionic g page AboutPage指令来新建。这时需要查看三个文件的配置。

about.module.ts

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {IonicApp, IonicModule, IonicErrorHandler, IonicPageModule} from 'ionic-angular';

import { AboutPage } from './about';

@NgModule({
  declarations: [
    AboutPage,
  ],
  imports: [
    IonicPageModule.forChild(AboutPage)
  ],
  entryComponents: [
    AboutPage,
  ],
})
export class AboutPageModule {}

about.ts

import { Component } from '@angular/core';
import {IonicPage, NavController, NavParams} from 'ionic-angular';
import {NgModule} from "@angular/compiler/src/core";

@IonicPage()

@Component({
  selector: 'page-about',
  templateUrl: 'about.html'
})

export class AboutPage {}

注意有@IonicPage()。

app.module.ts

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {IonicApp, IonicModule, IonicErrorHandler, IonicPageModule} from 'ionic-angular';
import { MyApp } from './app.component';
import { AboutPage } from '../pages/about/about';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';
import { AboutPageModule } from '../pages/about/about.module';  //添加上这行

@NgModule({
  declarations: [
    MyApp,
    //AboutPage,  //注释掉这行
    ContactPage,
    HomePage,
    TabsPage,
  ],
  imports: [
    IonicModule.forRoot(MyApp),
    AboutPageModule  //添加上这行
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage,
  ],
})
export class AppModule {}

这个是很重要的配置，这里添加了两行同时注释掉了一行。

about.ts页面接收变量

export class AboutPage {
  data:any;
  constructor(public navCtrl: NavController, public navParams: NavParams) {
      this.data = navParams.get('test');
  }

  ionViewDidLoad(navParams: NavParams) {

  }
}

about.html显示

  <a>{{data}}</a>

好了，整个流程就是这样了。