Passing data to URL with tabs enabled

@rohankapurmobile wrote:

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
  |

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 {}

Posts: 1

Participants: 1

Read full topic