ionic2/ionic3自由隐藏底部tab栏---让ionic3自己解决！手把手教程

最近用ionic3和angular4做APP，其中有个需求：用户无论在哪个页面只要超时了就弹界面要求用户输入PIN码。这时候必须是覆盖整个页面，除非PIN码正确否则其他内容都是disable的。（jq的方法在本文讨论之外）

写好了密码组件，发现弹框的时候底部的tab栏依然存在。。。

网上查到了 隐藏底部tab栏的三种方法/终极方法等等，但仍然做不到随意的隐藏和显示，这时跟我搭配的后端小伙，嗑着瓜子看了几眼ionic官网，油腻的胖手指着Modals说：你用这个试试，稍微改装一下，应该能用。

当时我已经在这个点卡了两小时（我是渣渣怪我咯）

然后试了一下ionic的 Modals，居然可以自由隐藏和显示了！

废话不多说上代码：

一、这是ionic 官网上关于Modals的教程：

http://ionicframework.com/docs/components/#menus

很详细，聪明的大伙儿肯定一看就懂。

二、我要在Module.ts这个二级子页面调用PIN组件，并隐藏tab栏，达到该应用的“锁屏”的效果。

1.把PIN组件和Modals import进来，Modals需要声明处理依赖。

2、使用Modals的方法。

这里要说到Modals 的 create方法要传的三个参数 (component, data, opts)，三个都是object类型

component是你跳转后要展示的视图对象； data是跳转时要携带过去的参数，可随意根据自己的需要设置； opts有个三个属性 showBackdrop　是否显示遮罩层，默认 true ； enableBackdropDismiss　点遮罩层任意地方是否能退出或返回， 默认 true ； cssClass　自定义样式。

我这里按照自己的需要设置了 false，三个属性不是必须，可随意根据自己的需要设置。

      ３.在需要触发的地方调用。　
       

４.效果图

PS:如果要传参数，那么用自带的NavParams 就可以获取，只有定个key就行了，举例如下：

红线划的就是我设置的key：

取参数。先声明一个变量和 NavParams，然后如下即可： 

５、关闭Modals（此部分代码在PIN.ts文件）

当用户输入ＰＩＮ码正确之后，ＰＩＮ组件消失，展示之前的页面。

引入、声明（依赖处理）：

这时候在键盘打钩按钮的点击事件里写如下代码：

        6、黑PIN消失，显示之前停留的界面；

 

第一次分享这种小tips，有错漏的地方请大家不吝指出，谢谢

          转载请@作者