Ionic 离子5离子标签隐藏在一些特定的页面

ffx8fchx  于 2022-12-09  发布在  Ionic
关注(0)|答案(4)|浏览(187)

我已经创建了选项卡页面,并通过选择器包含在我的app.component.html文件中,我的问题是,我想在一些特定的页面中隐藏选项卡,任何人都可以帮助我。

选项卡.页面.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>

应用程序.组件.html

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

vulvrdjw1#

如果您指的是特定的路由,则可以订阅Router并在App组件控制器中设置布尔标志

应用程序.组件.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
  }
}

应用程序.组件.html

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

gzszwxb42#

对于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()一样在页面组件中使用,以隐藏标签栏

ovfsdjhp

ovfsdjhp3#

将不需要显示标签栏的路由放在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>
kr98yfug

kr98yfug4#

有一个简单的方法来实现这一点-移动路线,你想隐藏标签栏到标签模块,外面的标签子路线。
假设您有一个“事件”模块,并且此路由在其自己的路由模块中定义:

{
  path: ':id',
  component: SomeInfoPage,
  canActivate: [AuthGuard],
}

将此路由移动到标签路由模块将隐藏页面上的标签栏。

{
  path: '',
  component: TabsPage,
  children: [
    {
      path: 'events',
      children: [
        {
          path: '',
          loadChildren: () => import('../events/events.module').then((m) => m.EventsModule),
        },
      ],
    },
  ],
}
{
  path: 'events/:id', (or 'tabs/events/:id')
  component: SomeInfoPage,
  canActivate: [AuthGuard],
}

相关问题