隐藏在某些特定页面中的离子 5 离子标签

Question

我已经创建了标签页并通过选择器将其包含在我的 app.component.html 文件中我的问题是我想在某些特定页面中隐藏标签页谁能帮我解决这个问题。下面我分享我创建标签页的代码。

tab.page.html

        <ion-tabs>
            <ion-tab-bar slot="bottom">
                 <ion-tab-button tab="home">
                   <ion-icon name="home"></ion-icon>
                <ion-label>Home</ion-label>
            </ion-tab-button>
    
            <ion-tab-button tab="search">
                <ion-icon name="search"></ion-icon>
                <ion-label>Search</ion-label>
            </ion-tab-button>
    
            <ion-tab-button tab="click-history">
                <ion-icon name="color-wand"></ion-icon>
                <ion-label>Clicks</ion-label>
            </ion-tab-button>
    
            <ion-tab-button tab="profile">
                <ion-icon name="person"></ion-icon>
                <ion-label>Profile</ion-label>
            </ion-tab-button>
        </ion-tab-bar>
    </ion-tabs>

app.component.html

    <ion-app>
        <app-menu></app-menu>
        <ion-router-outlet id="main"></ion-router-outlet>
        <app-tab></app-tab>
    </ion-app>

Answer 1

“页面”到底是什么意思？如果您指的是特定路线，您可以订阅 Router 并在 App 组件控制器

中设置一个布尔标志

app.component.ts

import { NavigationEnd, Router } from '@angular/router';

import { Subject } from 'rxjs';
import { takeUntil, filter } from 'rxjs/operators';

export class AppComponent implements OnInit, OnDestroy {
  closed$ = new Subject<any>();
  showTabs = true; // <-- show tabs by default

  constructor(private _router: Router) { }

  ngOnInit() {
    this._router.events.pipe(
      filter(e => e instanceof NavigationEnd),
      takeUntil(this.closed$)
    ).subscribe(event => {
      if (event['url'] === '/somePage') {
        this.showTabs = false; // <-- hide tabs on specific pages
      }
    });
  }
  
  ngOnDestroy() {
    this.closed$.next(); // <-- close subscription when component is destroyed
  }
}

app.component.html

<ion-app>
  <app-menu></app-menu>
  <ion-router-outlet id="main"></ion-router-outlet>
  <app-tab *ngIf="showTabs"></app-tab>
</ion-app>

Answer 2

将不需要显示标签栏的路由放在标签栏下方 ion-routeroutlet

<ion-app>
  <app-menu></app-menu>
  <ion-router-outlet id="main"></ion-router-outlet>
  <app-tab ></app-tab>
  <route path="/path_with_no_tabbar" component={component_wih_no_tabbar}/>
</ion-app>

Answer 3

对于 Ionic 6，我创建了一个运行良好的生命周期挂钩，您也可以手动将生命周期挂钩添加到每个页面，但这对于可重用性更好。

import { LifeCycleCallback, useIonViewWillEnter, useIonViewWillLeave } from "@ionic/react";

const onEnter: LifeCycleCallback = () => {
  const elements = document.getElementsByTagName('ion-tab-bar') as HTMLCollectionOf<HTMLElement>;
  for (let i = 0; i < elements.length; i++) {
    elements[i].style.display = 'none';
  }
};

const onLeave: LifeCycleCallback = () => {
  const elements = document.getElementsByTagName('ion-tab-bar') as HTMLCollectionOf<HTMLElement>;
  for (let i = 0; i < elements.length; i++) {
    elements[i].style.display = 'flex';
  }
};

/**
 * 
 * Used to hide/show the `ion-tab-bar` on page life cycle
 */
const useHideIonTabBar = () => {
  useIonViewWillEnter(onEnter);
  useIonViewWillLeave(onLeave);
};

export default useHideIonTabBar;

可以像useHideIonTabBar()一样在页面组件中使用它来隐藏标签栏

隐藏在某些特定页面中的离子 5 离子标签

Ionic 5 ion-tabs hiding in some specific pages

angular

ionic-framework

components

show-hide

ionic-tabs