ionic3 ion-footer 使用*ngIf 会遮挡元素的解决办法

当使用ion-footer组件时，正常情况下，ionic会正确计算出页面底部需要的空间，而不会遮挡底部元素，但是当ion-footer组件使*ngIf进行判断后，ionic就不会为底部预留空间。我猜想是因为ionic先渲染页面，后计算页面中的ngif等模块是否显示。不管它怎么产生的，这里的确是有个bug需要我们解决。

 

 

方法一：在ion-footer组件上方添加一个同高的div占位符，但是这有个问题是页面进入子组件的页面后，原本页面会正确计算出了底部需要的空间，导致占位符与底部计算出的空间重复了，看起来底部会有非常大的空白。

 

方法二：使用position最新的属性stick，这个属性会把元素黏在底部，具体使用方法这里不再赘述，但是问题是只有当页面内容超过一页时，footer才会看起来固定在底部。否则stick会显示在中部不会固定在底部。但是你可以给页面设置个最低高度，使页面占据空间超过一页，可以解决问题，这是最简单的解决方案，但是stick的兼容性存在各种问题，笔者在项目中使用该方法踩了无数坑，无奈放弃。

 

方法三：能完美的解决问题，但是需要用生命周期钩子，因为需要动用ts文件，笔者一直不想用该方法，但是为了解决问题，不得不用。预览代码如下：

 

html：

 

 

ts：

export class Page {
  hasBottom: boolean;
  ionViewDidLoad() {
    this.hasBottom = true;
  }
  ionViewWillLeave(){
    this.hasBottom = false;
  }
}

原理：其实就是方法一结合生命周期钩子来解决问题，ionViewDidLoad只会在页面进入后激活一次，此时显示占位符，当页面离开时ionViewWillLeave无论是销毁还是进入到子页面都不显示占位符（从子页面回来时，页面又可以正确计算出footer需要的空间，会和占位符产生重复，这里就是问题的关键）

总结：接触ionic没多久，很多东西还处于懵逼状态中，这里就是我想到的一些解决问题的方法，如果你有更好的解决方案，欢迎指教。

最终解决方案 看评论