ionic4子页面隐藏tabs

445

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

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;
      })
  }

}

 

tabs.scss

.hide {
    display: none;
}

tabs.page.html

<ion-tabs>
  <ion-tab-bar slot="bottom" [ngClass]="{'hide': isSubPage}">

  </ion-tab-bar>
</ion-tabs>

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

3 意见

留下一个答复

Please enter your comment!
Please enter your name here