在特定子页面上隐藏 Ionic TabBar (IONIC 3)答案

【问题标题】：Hide Ionic TabBar on specific subpages (IONIC 3)在特定子页面上隐藏 Ionic TabBar (IONIC 3)
【发布时间】：2017-11-18 00:36:09
【问题描述】：

我想在多个特定页面上隐藏我的标签栏。我的主要重点是将其隐藏在我的登录页面、注册页面和评论页面上。我已经尝试过 tabsHideOnSubPages: true，但是当我这样做时，我的 UserProfile 页面（这是一个子页面）隐藏标签栏。标签栏也必须在 UserProfile 页面上可见，但在我之前提到的子页面（登录、注册等）上也不可见。

我目前正在使用 Ionic 框架：ionic-angular 3.2.0

有谁知道我该如何解决这个问题？

【问题讨论】：

标签： css html angular ionic-framework

【解决方案1】：

你可以试试这个。

只需将 tabsHideOnSubPages 像这样放在您的配置中：

@NgModule({
  declarations: [ MyApp ],
  imports: [
    IonicModule.forRoot(MyApp, {
      tabsHideOnSubPages: true,
    }, {}
  )],
  bootstrap: [IonicApp],
  entryComponents: [ MyApp ],
  providers: []
})

【讨论】：

这正是我想要的！谢谢！

【解决方案2】：

我可以给你一个快速的修补程序。

将此代码复制到您的 .ts 页面文件中。该函数将在页面加载时执行。

如果要隐藏标签栏，请执行以下代码：

tabs[key].style.display = 'none';

如果您想显示它，只需将“none”更改为“flex”即可使用此代码。

tabs[key].style.display = 'flex';

这段代码是一个角度函数，基本上意味着它在页面加载时执行。

ngAfterViewInit()

完整代码：

ngAfterViewInit() {
    let tabs = document.querySelectorAll('.show-tabbar');
    if (tabs !== null) {
        Object.keys(tabs).map((key) => {
            tabs[key].style.display = 'none';
        });
    }
}

如果您离开页面，也可以使用此代码再次显示标签栏。

    ionViewWillLeave() {
        let tabs = document.querySelectorAll('.show-tabbar');
        if (tabs !== null) {
            Object.keys(tabs).map((key) => {
                tabs[key].style.display = 'flex';
            });

        }
}

希望这对你有所帮助。

【讨论】：