ionic4子页面隐藏tabbar

在ionic3中,可以通过设置tabsHideOnSubPages: true,实现子页面隐藏tabs。
ionic4中没有提供这个配置,这里提供一个解决办法:
通过监听路由,判断当前页面层级,从而实现隐藏tabs。

1、tabs.page.ts

import { Component } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';


@Component({
  selector: 'app-tabs',
  templateUrl: 'tabs.page.html',
  styleUrls: ['tabs.page.scss']
})
export class TabsPage {

  isSubPage = false;

  constructor(
    private router: Router
  ) {
    this.router.events.pipe(
      filter(e => e instanceof NavigationEnd))
      .subscribe((e: any) => {
        console.log(e.url.split('/').length)
        this.isSubPage = e.url.split('/').length > 3 ? true : false;
      })
  }

}

2、tabs.scss

.hide {
    display: none;
}

3、tabs.page.html


  

  

可以更具实际情况,修改isSubPage判断条件。
还可以有其他实现方法,但只有这样写修改能只控制在tabs页面。
如果有更优的解决办法,请通过评论告知我。

你可能感兴趣的:(ionic4子页面隐藏tabbar)