Ionic use different tabs bar in component-CodePudding

I'm currently building my first ionic app with Angular. As a template I use the base setup from the recommended generate command, which has tabs:

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

On every tab, I use ion-nav to open Subcomponents. For example, on chats tab, I can open a single chat by the following code:

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

It works as expected. The only issue is, that I still can see the navigation tabs on the bottom. I would like to change the footer bar within the Subcomponents.

An example is whatsapp, which uses the text field in the footer in single chat. Is that possible?

CodePudding user response：

You see the tab Footer when you use the /tabs/tab Route:

Add this to your app-routing:

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

Try these different Urls in your Browser:

url: "localhost:port/chats" //without tab footer
url: "localhost:port/tabs/chats" //with tab footer

This should load your chat page without the tab footer:

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

Obvious problem with this is you cant use

this.navCtrl.back();

As an Alternative you could use something like this:

  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>