Ionic 在组件中使用不同的标签栏

Question

我目前正在使用 Angular 构建我的第一个离子应用程序。作为模板，我使用推荐的生成命令的基本设置，它有选项卡：

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

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

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，它在单个聊天中使用页脚中的文本字段。 那可能吗？

Answer 1

当您使用 /tabs/tab 路由时，您会看到选项卡页脚：

将此添加到您的应用程序路由：

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

在您的浏览器中尝试这些不同的网址：

url: "localhost:port/chats" //没有标签页脚
url: "localhost:port/tabs/chats" //带标签页脚

这应该加载没有标签页脚的聊天页面：

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;
  }

选项卡.page.ts

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

标签页.html

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