Different behaviour between ion-tab tab attribute and ion-fab routerLink

Issue

I have an ionic tab page containing event specific information to display. Routing is set up so that you are routed to a specific event's tab page

tabs.page.html

<ion-tabs>
    <ion-tab-bar slot="bottom" mode="md">
        <ion-tab-button tab="token">
            <ion-icon src="/assets/svg/ticket-star.svg"></ion-icon>
            <ion-label>Tokens</ion-label>
        </ion-tab-button>

        <ion-tab-button tab="transactions">
            <ion-icon src="/assets/svg/empty-wallet-change.svg"></ion-icon>
            <ion-label>Transactions</ion-label>
        </ion-tab-button>

        <div class="centerd-btn"></div>

        <ion-tab-button tab="swipe">
            <ion-icon src="/assets/svg/people.svg"></ion-icon>
            <ion-label>Swipe</ion-label>
        </ion-tab-button>

        <ion-tab-button tab="buy">
            <ion-icon src="/assets/svg/card.svg"></ion-icon>
            <ion-label>Buy</ion-label>
        </ion-tab-button>

        <ion-tab-button tab="user" hidden>
        </ion-tab-button>

        <ion-tab-button tab="notifications" hidden>
        </ion-tab-button>

        <ion-tab-button tab="help" hidden>
        </ion-tab-button>

    </ion-tab-bar>
    <ion-fab vertical="bottom" horizontal="center" slot="fixed">
        <ion-fab-button routerLink="scan" routerLinkActive="active-tab" [routerLinkActiveOptions]="{exact:true}">
            <ion-icon src="/assets/svg/qr-scan.svg"></ion-icon>
        </ion-fab-button>
        <ion-label>Scan at bar</ion-label>
    </ion-fab>
</ion-tabs>

tabs-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TabsPage } from './tabs.page';

const routes: Routes = [
  {
    path: ':eventId',
    component: TabsPage,
    children: [
      {
        path: 'home',
        loadChildren: () => import('../home/home.module').then(m => m.HomePageModule)
      },
      {
        path: 'token',
        loadChildren: () => import('../token/token.module').then(m => m.TokenPageModule)
      },
      {
        path: 'transactions',
        loadChildren: () => import('../transactions/transactions.module').then(m => m.TransactionsPageModule)
      },
      {
        path: 'swipe',
        loadChildren: () => import('../swipe/swipe.module').then(m => m.SwipePageModule)
      },
      {
        path: 'buy',
        loadChildren: () => import('../buy/buy.module').then(m => m.BuyPageModule)
      },
      {
        path: 'scan',
        loadChildren: () => import('../scan/scan.module').then(m => m.ScanPageModule)
      },
      {
        path: 'notifications',
        loadChildren: () => import('../notifications/notifications.module').then(m => m.NotificationsPageModule)
      },
      {
        path: 'help',
        loadChildren: () => import('../help/help.module').then(m => m.HelpPageModule)
      },
      {
        path: 'user',
        loadChildren: () => import('../user/user.module').then(m => m.UserPageModule)
      },
      {
        path: '',
        redirectTo: '/event/swipedrinks/home',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    component: TabsPage
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class TabsPageRoutingModule {}

All works fine except for this <ion-fab> element's routing. I can click it the first time and the app is routed correctly to for example /event/A4OUJTpgYfeNEF6e5k4v/scan but after clicking on another tab element you can't go back to the scan part.

I don't have any console errors so I don't really know where to start.

I guess Ionic is handling the tab attribute not the same as routerLink attribute in the ion-fab element but what is the alternative then?

Solution

Hi it seems like there is some issue in sol ionic faced same issue at side nav resolved issue by using (click)="navController.naviagteForward('event/scan')" and in constructor constructor(public navController:NavController)

Answered By - sai kiran