Using router.navigate to navigate between ion-tab s

@vitonimal wrote:

Hello! I am trying to implement navigation between tabs. I read the following documentation: https://ionicframework.com/docs/api/tab-button but it is not solving my use case. Here is what I am trying to do:

I want 3 tabs. Each tab will load a component with specific parameters. My main concern is that I need to pass parameters to each component, and not from the query params. I have in fact read through that SO post : https://stackoverflow.com/questions/56197176/how-to-pass-parameters-through-ionic-4-tabs-buttons

However, I need to pass objects as parameters, and it just does not seem clean at all to use query parameters.

<ion-tabs id="nav-tabs-work-order" tabsPlacement="bottom" tabsHighlight="false" selectedIndex={{tab}}>
  <ion-tab tabTitle="Issued" [root]="issuedWorkOrders" [rootParams]="issuedWorkOrdersParams" tabsHideOnSubPages="true"></ion-tab>
  <ion-tab tabTitle="In Progress" [root]="inProgressWorkOrders" [rootParams]="inProgressWorkOrdersParams" tabsHideOnSubPages="true"></ion-tab>
  <ion-tab tabTitle="Completed" [root]="completedWorkOrders" [rootParams]="completedWorkOrdersParams" tabsHideOnSubPages="true"></ion-tab>
</ion-tabs>

After reading through the doc, I noticed that I would need a structure that looks like:

<ion-tabs>
  <ion-tabs-bar slot="bottom">
    <ion-tab-button (click)="navigateToWorkOrdersList(issuedWorkOrdersParams)">
      <ion-label>Issued</ion-label>
    </ion-tab-button>
    <ion-tab-button (click)="navigateToWorkOrdersList(inProgressWorkOrdersParams)">
      <ion-label>In progress</ion-label>
    </ion-tab-button>
    <ion-tab-button (click)="navigateToWorkOrdersList(completedWorkOrdersParams)">
      <ion-label>Completed</ion-label>
    </ion-tab-button> 
  </ion-tabs-bar>
</ion-tabs>

Here is the issue though! It won’t compile unless I have a tab attribute to each ion-tab-button that would be responsible to navigate to another component (if I understood the doc correctly).

I tried to add a (click) to illustrate that I needed the navigation to occur when I click on the tab (I know that this behaviour occurs in a general use case due to the tab attribute).

Here is the navigation function: (I just realized it is missing a relativeTo param, but the reason for the bug really is the template)

  public navigateToWorkOrdersList(params: any) : void {
    this.router.navigate(['construction/list'], { state: params });
  }

I know that the router that I would need to use would be different than the router above (router-outlet’s router), but the method above shows what I want to achieve with the tabs. In other words, is there a way I can access the tabs’ router?

Note that the error message I am getting is pretty odd:

Screen Shot 2020-04-25 at 3.47.45 PM1136×148 42.7 KB

Then the app freezes.

That being said, how can I reproduce the exact ionic 3 code using the new syntax in ionic 4? Thanks!

I will keep looking on my end and let you know if I can find anything.

Posts: 2

Participants: 1

Read full topic