Ionic 组件中的离子使用不同选项卡条

6qfn3psc 于 2023-02-06 发布在 Ionic

关注(0)|答案(1)|浏览(167)

我目前正在用Angular构建我的第一个离子应用程序，我使用推荐的generate命令中的基本设置作为模板，该命令包含选项卡：

ionic start chat-app tabs --type=angular --capacitor

在每个选项卡上，我使用ion-nav打开子组件。例如，在chats选项卡上，我可以通过以下代码打开一个聊天：

import { NavController } from '@ionic/angular';
...

@Component({
  templateUrl: '<button (click)=openChat(chat) *ngFor="let chat of chats">...</button>'
})
...

constructor(
  public navCtrl: NavController
) { }

openChat(chat: any): void {
  this.navCtrl.navigateForward(["chats", chat.id]);
}

它按预期工作。唯一的问题是，我仍然可以看到底部的导航选项卡。我想更改子组件内的页脚栏。
一个例子是whatsapp，它在单聊中使用页脚中的文本字段，这可能吗？

ionic-framework

来源：https://stackoverflow.com/questions/75316763/ionic-use-different-tabs-bar-in-component

1条答案

按热度按时间

ss2ws0br1#

当您使用/tabs/tab Route时，您会看到选项卡Footer：
将此添加到您的应用路由：

{
    path: 'chats',
    loadChildren: () => import('./chats/chats.module').then(m => m.ChatsPageModule)
  }

在您的浏览器中尝试这些不同的URL：
url：“localhost：port/chats”//不带选项卡页脚
url：“本地主机：端口/选项卡/聊天”//带有选项卡页脚
这将加载您的聊天页面，而不带选项卡页脚：

this.navCtrl.navigateRoot(["chats", chat.id]);

明显的问题是您不能使用

this.navCtrl.back();

作为一个替代方案，您可以使用类似以下的内容：

constructor(private navctrl: NavController, private tab: TabsPage) {}

  openChat(chat: any): void {
    this.navCtrl.navigateForward(["chats", chat.id]);
    this.tab.footer = false;
  }

Tabs.page.ts

export class TabsPage {
  footer: boolean;
  constructor() {}
}

Tabs.page.html

<ion-tab-bar slot="bottom" [hidden]="!footer">
    ...
  </ion-tab-bar>

赞(0）回复(0）举报 2023-02-06

我来回答

Ionic 组件中的离子使用不同选项卡条

1条答案

相关问题

热门标签

最新问答