ionic3之页面跳转的两种方式-yellowcong

爱被打了一巴掌 2022-05-31 11:57 269阅读 0赞

> 在ionic中，页面条状主要有两种方式，1、通过在界面中`[navPush]="morePage"`的方式，2、通过代码的方式跳转，绑定事件`(click)="pushMorePage()"`,通过调用这个事件的同时，我们可以在这个里面添加参数的传递，主要依赖于 `NavController,NavParams`这两个组建

## 代码地址 ##

https://gitee.com/yellowcong/ionic/tree/master/ionic3-param

## 界面跳转方式 ##

### home.ts ###

在这个界面中，我们导入了`NavController` ,这个东西可以控制界面的跳转，一般在界面跳转中，都是通过这个来进行界面跳转的，在初始化的时候，就会注入`NavController`。

import { Component } from '@angular/core';
    
    //NavController就是用来管理和导航页面的一个controlle
    import { NavController } from 'ionic-angular';
    
    //导入more 的界面
    import { MorePage } from '../more/more';
    
    @Component({
      selector: 'page-home',
      templateUrl: 'home.html'
    })
    
    //暴漏HomePage组建
    export class HomePage {
      //定义一个属性
      morePage;
    
      //注入一个NavController的实例.
      constructor(public navCtrl: NavController) {
        this.morePage = MorePage;
      }
    
      //通过代码的方式跳转
      pushMorePage(){
        console.log("代码方式跳转");
        //跳转到指定页面
        this.navCtrl.push(MorePage);
      }
    }

### home.html ###

这个地方设定了两个跳转的方式，一个是通过界面的方式，还有一个是通过后台的pushMorePage()事件来跳转界面

<ion-header>
      <ion-navbar>
        <ion-title>Home</ion-title>
      </ion-navbar>
    </ion-header>
    
    <ion-content padding>
      <h2>Welcome to Ionic!</h2>
      <p>
        测试界面
      </p>
      
      <button ion-button [navPush]="morePage">界面方式跳转</button>
    
      
      <button ion-button (click)="pushMorePage()">代码方式跳转</button>
    </ion-content>

## 参数传递 ##

### home.ts ###

参数传递和界面跳转，有一定联系，通过`NavController.push`进行界面的跳转，第二个参数，可以传递一个集合对象，将参数传递到下一个界面中。

import { Component } from '@angular/core';
    
    //NavController就是用来管理和导航页面的一个controlle
    import { NavController } from 'ionic-angular';
    
    //导入more 的界面
    import { MorePage } from '../more/more';
    
    @Component({
      selector: 'page-home',
      templateUrl: 'home.html'
    })
    
    //暴漏HomePage组建
    export class HomePage {
      //定义一个属性
      morePage;
    
      //注入一个NavController的实例.
      constructor(public navCtrl: NavController) {
        this.morePage = MorePage;
      }
    
      //通过代码的方式跳转
      pushMorePage(){
        console.log("代码方式跳转");
    
        //跳转到指定页面， 后面的集合是一个参数
        this.navCtrl.push(MorePage,{
          title:'我是上一个界面搞来的'
        });
      }
    }

### more.ts ###

more.ts是跳转的目标界面，可以通过`NavParams` 这个对象，来接收前面界面传递过来的参数。然后可以通过`NavController.pop()`方法，退出当前的界面，反回到上一层。

//@angular/core是一个npm的模块，定义了angular的核心功能
    import { Component } from '@angular/core';
    
    
    //NavController就是用来管理和导航页面的一个controlle
    //NavParams 这个是参数
    import { NavController,NavParams } from 'ionic-angular';
    
    @Component({
        //为页面指定选择器的名称
        //在ionic 3.x中规范为 page- 开头，为了不造成混乱，需要保持每个页面selector的唯一性
        //可以直接通过templateUrl 来引用html,而不直接使用template
        //模板的字符串，里面其实就是html代码
        //template: `<h1>Hello World!</h1>`
        //可以直接通过templateUrl 来引用html,而不直接使用template
        selector: 'page-more',
        templateUrl: 'more.html'
      })
    //export关键词：将类暴露出去，以便其它的文件可以import到它。
    //类的命名：在ionic3中，页面类采用页面名+Page的命名方式，首字母大写，如HomePage, ContactPage等。
    export class MorePage {
    
      //声明传递进来的变量
      title:string;
    
      constructor(public navCtrl: NavController,public params:NavParams) {
        //获取传递过来的参数
        this.title=this.params.get('title');
    
        //当参数没有定义的情况
        if(this.title == undefined){
          this.title = "没有获取到结果";
        }
      }
    
      //返回到上一个界面
      pushHomePage(){
        this.navCtrl.pop();
      }
    }

### 运行效果 ###

参数代码的传递，我这个地方的做法是后台设置  
![这里写图片描述][SouthEast]

## 界面跳转原理 ##

所有的界面像栈一样，画面不断的进入，就不断的增加，新的画面把旧的画面给盖住了  
![这里写图片描述][SouthEast 1]

退出的时候，使用pop函数，退出界面，释放内存  
![这里写图片描述][SouthEast 2]

### TabsPage ###

这个比较的特殊，一个TabsPage里面，包含了多个tab ，而每个tab都有一个单独的界面栈，在tab之间切换的时候，看到的都是每个tab的最上面一个界面。  
![这里写图片描述][SouthEast 3]

## 参考文章 ##

[https://www.jianshu.com/p/de40aeb3d371][https_www.jianshu.com_p_de40aeb3d371]

[SouthEast]: /images/20220531/fdec856348894bf99c4b6ff5f4979fcd.png
[SouthEast 1]: /images/20220531/fd68178fe5df4f2eba6764672d6a73fb.png
[SouthEast 2]: /images/20220531/523b273b016643e28dcc6b102eae8360.png
[SouthEast 3]: /images/20220531/7486c5321e46486e8e94b66ebd683740.png
[https_www.jianshu.com_p_de40aeb3d371]: https://www.jianshu.com/p/de40aeb3d371