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

╰半橙微兮° 2022-05-10 06:48 241阅读 0赞

原文出处：[http://www.itdaan.com/blog/2017/12/01/64cbde0255837c79abdc0dbaa8baf954.html][http_www.itdaan.com_blog_2017_12_01_64cbde0255837c79abdc0dbaa8baf954.html]  
ionic3在页面跳转以及参数传递上做了修改。但不了解ionic或者刚接触的新手就难以理解，即使是官方提供的教程([https://ionicframework.com/docs/api/navigation/IonicPage/][https_ionicframework.com_docs_api_navigation_IonicPage])也并不详细，还有一些坑存在。

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

# home.html页面 #

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

# 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显示 #

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

[http_www.itdaan.com_blog_2017_12_01_64cbde0255837c79abdc0dbaa8baf954.html]: http://www.itdaan.com/blog/2017/12/01/64cbde0255837c79abdc0dbaa8baf954.html
[https_ionicframework.com_docs_api_navigation_IonicPage]: https://ionicframework.com/docs/api/navigation/IonicPage/