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

如何解决在某些特定页面中隐藏了Ionic 5离子标签

我已经创建了选项卡页面，并通过选择器将其包含在我的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>

解决方法

“页面”到底是什么意思？如果您指的是特定路线，则可以订阅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>