标签页未隐藏在Ionic 5的子页面上

Question

在Ionic 4或5中，选项卡栏未隐藏在子页面上。当然，它在离子2或离子3中效果很好。请让我知道如何解决此问题。

Answer 1

这是我的解决方案。但希望是最好的解决方案。

1. 创建TabsService
2. 将其导入app.module.ts这是TabsService
的完整代码

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

@Injectable({
  providedIn: 'root'
})
export class TabsService {
  constructor(private router: Router, private platform: Platform) {
    this.platform.ready().then(() => {
      this.navEvents();
    });
  }

  public hideTabs() {
    const tabBar = document.getElementById('kidesiaTabBar');
    if (tabBar && tabBar.style.display !== 'none') {
      tabBar.style.display = 'none';
    }
  }

  public showTabs() {
    const tabBar = document.getElementById('kidesiaTabBar');
    if (tabBar && tabBar.style.display !== 'flex') {
      tabBar.style.display = 'flex';
    }
  }

  private navEvents() {
    this.router.events
      .pipe(filter(e => e instanceof NavigationEnd))
      .subscribe((e: any) => {
        this.showHideTabs(e);
      });
  }

  private showHideTabs(e: any) {
    const urlArray = e.url.split('/');
    if (urlArray.length >= 3) {
      let shouldHide = true;
      if (urlArray.length === 3 && urlArray[1] === 'tabs') {
        shouldHide = false;
      }
      try {
        setTimeout(() => (shouldHide ? this.hideTabs() : this.showTabs()), 300);
      } catch (err) {}
    }
  }
}