【前端】Ionic4 返回功能-NavController

前言

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

                                                           【前端】Ionic4 返回功能-NavController_第1张图片

HTML  

  头部代码


    
        
        抽奖管理
    

 一、引入Icon图标

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


二、添加事件

  添加自定义事件: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官网上面有具体的使用方法,非常的方便。

                                                                           感谢您的访问!

你可能感兴趣的:(【前端】)