Passing data to URL for a tabbed route - I got it nvm

Ionic Framework
1

Hey, so I recently made an Ionic basic navigation app successfully with a tabs based layout. However, I am now having difficulty supplying data to the individual tabs by the route. Here are the relevant bits of what I have so far (I explain more after the code):

Here is the app-routing.module.ts:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
  { path: 'dashboard', loadChildren: './pages/dashboard/dashboard.module#DashboardPageModule' },
  { path: 'bitcoin-wallet', loadChildren: './pages/bitcoin-wallet/bitcoin-wallet.module#BitcoinWalletPageModule' },
  { path: 'ethereum-wallet', loadChildren: './pages/ethereum-wallet/ethereum-wallet.module#EthereumWalletPageModule' }
];

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

The bitcoin-wallet page is the one I would like to supply an ‘id’ parameter to. The issue here is that the bitcoin-wallet page is actually a tab based layout.

The bitcoin-wallet folder has its own page and multiple tab pages in there as well. The layout is as follows:

  • bitcoin-wallet-folder
    |_ details
    |_ tab1
    |_ tab2
    |_ tab3
    |_ bitcoin-wallet.module.ts
    |_ bitcoin-wallet.page.html
    |_ bitcoin-wallet.page.scss
    |_ bitcoin-wallet.page.spec.ts
    |_ bitcoin-wallet.page.ts

Here is the bitcoin-wallet.module.ts file:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';

import { IonicModule } from '@ionic/angular';

import { BitcoinWalletPage } from './bitcoin-wallet.page';

const routes: Routes = [
  {
    path: '',
    component: BitcoinWalletPage,
    children: [
      {
        path: 'tab1',
        children: [
          {
            path: '',
            loadChildren: './tab1/tab1.module#Tab1PageModule'
          }
        ]
      },
      {
        path: 'tab2',
        children: [
          {
            path: '',
            loadChildren: './tab2/tab2.module#Tab2PageModule'
          },
          {
            path: 'details',
            loadChildren: './details/details.module#DetailsPageModule'
          }
        ]
      },
      {
        path: 'tab3',
        children: [
          {
            path: '',
            loadChildren: './tab3/tab3.module#Tab3PageModule'
          }
        ]
      },
      {
        path: '',
        redirectTo: '/bitcoin-wallet/tab1',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: '/bitcoin-wallet/tab1',
    pathMatch: 'full'
  }
];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes)
  ],
  declarations: [BitcoinWalletPage]
})
export class BitcoinWalletPageModule {}

What I need is to be able to pass in data to the route of the bitcoin tabs page. Something like ’ localhost:8100/bitcoin-wallet/:id/tab1 '. Is this possible, and if so how would I achieve this?
(localhost only included because im testing this on my PC’s browser)

For reference, I already tried adding a simple ‘/:id’ to the bitcoin-wallet page in the app-routing module and adding the same ‘:id’ to the last two objects in the bitcoin-wallet module and it didn’t work. I tried routing to there from the dashboard page using:

  <ion-button [routerLink]="['/', 'bitcoin-wallet', 1234]" expand="block" color="primary"> BTC Wallet </ion-button>

With 1234 clearly being the :id parameter, it said that it couldn’t find the route /bitcoin-wallet/1234.

Don’t know if this is relevant but this is what the bitcoin-wallet.page.html looks like:

<ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="tab1">
      <ion-icon name="flash"></ion-icon>
      <ion-label>Tab one</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="tab2">
      <ion-icon name="moon"></ion-icon>
      <ion-label>Tab two</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="tab3">
      <ion-icon name="options"></ion-icon>
      <ion-label>Tab three</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

More than happy to share the entire repo if required. Thanks so much

P.S. The names of the pages are all placeholders lmao. I’m not doing a crypto thing, just trying to learn. Maybe I will one day though :wink: