【前端】Ionic4 返回功能-NavController

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/m18633778874/article/details/86620093

前言

     小编所在的项目，前端Ionic--手机端项目需要版本升级，从Ionic3升级到Ionic4，其中需要使用返回功能，虽然Ionic4支持手机自身的返回键，但是对于用户来说，为用户在软件上面添加一个返回按钮，会更加服务用户。下面是使用Ionic4中NavController包实现的返回功能。

HTML  

  头部代码

<ion-header>
    <ion-toolbar class="toolbarback">
        <ion-icon style="float:left;width:50px;height:30px;color:white" name="ios-arrow-back" (click)='canGoBack()'></ion-icon>
        <ion-title id="animated">抽奖管理</ion-title>
    </ion-toolbar>
</ion-header>

 一、引入Icon图标

    其中主要是引用图标：ios-arrow-back

<ion-icon style="float:left;width:50px;height:30px;color:white" 
name="ios-arrow-back" (click)='canGoBack()'></ion-icon>

二、添加事件

  添加自定义事件：canGoBack()

TS

一、引入包

在package.json中引用 "@ionic/angular": "4.0.0-rc.2" 指定版本，不然会出现不同版本之间调用方法的差异，

import { NavController } from '@ionic/angular';

二、声明变量

  constructor(public nav: NavController) { }

三、实现自定义事件

  其中goBack()方法，在不同的"@ionic/angular"版本中不同，在4.0.0-rc.2版本中是goBack()，在4.0.0-rc.3中，则是back()方法，使用时注意版本。

  // 返回按钮
  canGoBack() {
    this.nav.goBack();
  }

小结

    这个功能的实现，基本上通过NavController包就可以实现，Ionic官网上面有具体的使用方法，非常的方便。

                                                                           感谢您的访问！