Pass navigation state object between ion-tabs

Ionic Framework Ionic Angular
1

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 PM
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.

UPDATES: I am watching this tutorial at the moment : https://www.youtube.com/watch?v=yl6AjEjTPGA

It did not help much in my situation though. I really want to reuse the routes I already defined that are using NavigationParams and not queryParams.

However it seems like my implementation is missing the router-outlets. I am just wondering how I can access the router of each tab and this will solve my problem :slight_smile:

UPDATE:

I tried the code in the video and the app crashes with the same error as above.

3

I think I really am limited to queryParams. This post shows how to do it: Ionic 4 Tab navigation params.

However, I am still having an error every time I try to implement ion-tabs (the missing chunk) It seems like a router issue though… not related to tabs at all.

In fact, this is an error with the way I lazyliad the route (will investigate later). Here is a good article to understand lazyloading. (The error I get is related to a chunk, and lazy loading creates a new chunk, so the error is most likely due to the lazy load. It is weird that the page works fine if I replace the tabs by anything else though)