使用后退按钮后离子键消失

我的离子应用程序中有选项卡,当我转到页面并再次回到选项卡时,选项卡栏将消失。

Demo

tab1

将样本链接到其他页面

<ion-label routerDirection="forward" [routerLink]="['/tabs/', 'groups', group.id]">sample text</ion-label>

然后在另一页中,我有后退按钮,例如:

<ion-header>
    <ion-toolbar class="header-bg">
        <ion-buttons slot="start">
        <ion-back-button></ion-back-button> // back to tab1
        </ion-buttons>
        <ion-title [innerHTML]="messages?.name"></ion-title>
    </ion-toolbar>
</ion-header>

但是我的页面组件中也有此代码,可防止在该页面中显示选项卡。

ngOnInit() {
    // hide tab bar in current page
    const tabs = document.querySelectorAll('ion-tab-bar');
    Object.keys(tabs).map((key) => {
      tabs[key].style.display = 'none';
    });
}

Note: code above only hides tab bars inside my second page and not tabs page, normally when i back to tabs they should be visible. PS: I'm not saying that this code cause the issue, I just thought it might be worth to mention that I have such code.

知道为什么返回到标签页时我的标签不显示吗?

评论
desse
desse

解决了

我用此代码恢复了我的标签页样式

ionViewDidLeave() {
    const tabs = document.querySelectorAll('ion-tab-bar');
    Object.keys(tabs).map((key) => {
      tabs[key].style.display = 'flex';
    });
}
当用户离开第二页时,上面的代码将恢复我的标签的默认样式。

-Thanks to Nicolas suggestions.

点赞
评论
樱小桃~
樱小桃~

离开页面前,从样式中删除任何内容:

使用ngOnDestroy或ionViewWillLeave

ngOnDestroy() {
    // hide tab bar in current page
    const tabs = document.querySelectorAll('ion-tab-bar');
    Object.keys(tabs).map((key) => {
      tabs[key].style.display = 'block';
    });
}
点赞
评论