在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页面。
如果有更优的解决办法,请通过评论告知我。
看不懂,代码照贴也出错。。。
先理解,再编程…
谢谢!