how to pass data from blank page to tabs page in ionic 4

Question

I am new to ionic.
I want to pass the parameter from one page to the tabs page.
Basically it's a place list. On click of the item, I want to pass place_id to place tab pages.
There are 3 tabs: Place Detail, Member List, Events.
I want to pass place_id to all pages.
On click of an item if I pass a parameter to the tabs page it won't work. But without parameter, it works perfectly. It goes to the tabs page.

app-routing.module.ts

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

const routes: Routes = [
  {
    path: 'tab',
    loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
  },
  {
    path: 'member-detail',
    loadChildren: () => import('./member-detail/member-detail.module').then( m => m.MemberDetailPageModule)
  },
  {
    path: 'member-detail/:userId',
    loadChildren: () => import('./member-detail/member-detail.module').then( m => m.MemberDetailPageModule)
  },
  {
    path: '',
    loadChildren: () => import('./login/login.module').then( m => m.LoginPageModule)
  },
  {
    path: 'register',
    loadChildren: () => import('./register/register.module').then( m => m.RegisterPageModule)
  },
  {
    path: 'forgot-password',
    loadChildren: () => import('./forgot-password/forgot-password.module').then( m => m.ForgotPasswordPageModule)
  },
  {
    path: 'otp',
    loadChildren: () => import('./otp/otp.module').then( m => m.OtpPageModule)
  },
  {
    path: 'edit-profile',
    loadChildren: () => import('./edit-profile/edit-profile.module').then( m => m.EditProfilePageModule)
  },
  {
    path: 'forgot-change-password',
    loadChildren: () => import('./forgot-change-password/forgot-change-password.module').then( m => m.ForgotChangePasswordPageModule)
  },
  {
    path: 'forgot-change-password/:contact',
    loadChildren: () => import('./forgot-change-password/forgot-change-password.module').then( m => m.ForgotChangePasswordPageModule)
  },
  {
    path: 'member-list',
    loadChildren: () => import('./member-list/member-list.module').then( m => m.MemberListPageModule)
  },
  {
    path: 'places',
    loadChildren: () => import('./places/places.module').then( m => m.PlacesPageModule)
  },
  // {
  //   path: 'place-tab',
  //   loadChildren: () => import('./place-tab/place-tab.module').then( m => m.PlaceTabPageModule)
  // },
  {
    path: 'place-tab/:placeId',
    loadChildren: () => import('./place-tab/place-tab.module').then( m => m.PlaceTabPageModule)
  },
  {
    path: '',
    loadChildren: () => import('./place-tab/place-tab.module').then( m => m.PlaceTabPageModule)
  },
  {
    path: '',
    loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
  }
];
@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

places.page.ts

placeDetail(placeId: string) {
    console.log(placeId);
    this.router.navigate(['/place-tab/', placeId]);
    // this.router.navigateByUrl('/place-tab');
  }     

place-tab.page.ts

export class PlaceTabPage {
  placeId: any;
  constructor(private activatedRoute: ActivatedRoute) { 
    this.activatedRoute.params.subscribe(params => {
      this.placeId = params['placeId']; 
    });
    console.log(this.placeId);
  }
}  

place-tab-routing.module.ts

const routes: Routes = [
  {
    path: 'place-tab',
    component: PlaceTabPage,
    children: [
      {
        path: 'place-detail',
        children: [
          {
            path: '',
            loadChildren: () =>
              import('../place-detail/place-detail.module').then(m => m.PlaceDetailPageModule)
          }
        ]
      },
      {
        path: 'place-member',
        children: [
          {
            path: '',
            loadChildren: () =>
              import('../place-member/place-member.module').then(m => m.PlaceMemberPageModule)
          }
        ]
      },
      {
        path: 'place-event',
        children: [
          {
            path: '',
            loadChildren: () =>
              import('../place-event/place-event.module').then(m => m.PlaceEventPageModule)
          }
        ]
      },
      {
        path: '',
        redirectTo: '/place-tab/place-detail',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: '/place-tab/place-detail',
    pathMatch: 'full'
  }
];

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

Answer 1

Here's an example of how you can pass data to the tabs component and maintain that state throughout navigation of the child tabs. This solution does feel a little clunky so it would not surprise me if a better answer surfaces at some point.

Let's assume we will be navigating from home.page.html to tabs.page.html by a button click. You can register a click event to a function in home.page.ts and within that function use Angular's router to navigate to the tabs page. The trick here is to add NavigationExtras which is where you can add state. Angular docs define the state property as:

Developer-defined state that can be passed to any navigation. Access this value through the Navigation.extras object returned from router.getCurrentNavigation() while a navigation is executing.

After a navigation completes, the router writes an object containing this value together with a navigationId to history.state. The value is written when location.go() or location.replaceState() is called before activating this route.

The state property can contain whatever you want to pass along to the route. The html and ts file would look something like this

home.page.html

<ion-content>
  <ion-button (click)="routeToTabs(1)">Pass the ID of 1 to tabs pages</ion-button>
  <ion-button (click)="routeToTabs(2)">Pass the ID of 2 to tabs pages</ion-button>
  <ion-button (click)="routeToTabs(3)">Pass the ID of 3 to tabs pages</ion-button>
</ion-content>

home.page.ts

import { Router, NavigationExtras } from '@angular/router';

...
export class HomePage implements OnInit {

  constructor(private router: Router) { }

  routeToTabs(myId: any) {
    const navigationExtras: NavigationExtras = { state: { id: myId } };
    this.router.navigate(['tabs'], navigationExtras);
  }
}

Once the navigation completes the state property goes away (sort of - it get stored in a history.state property) so within the tabs.page.ts constructor grab the data passed in and assign it to local variables like this

export class TabsPage implements OnInit {
  id: any;

  constructor(private router: Router) {
    const navigation = this.router.getCurrentNavigation();
    const state = navigation.extras.state;
    this.id = state.id;
  }
}

Here's where it does not feel quite right... In the tabs.page.html add a click event to all of your tabs calling a function and passing it the tab name like this

<ion-tabs>

  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="tab1" (click)="routeToTab('tab1')">
      <ion-icon name="triangle"></ion-icon>
      <ion-label>Tab 1</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab2" (click)="routeToTab('tab2')">
      <ion-icon name="ellipse"></ion-icon>
      <ion-label>Tab 2</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab3" (click)="routeToTab('tab3')">
      <ion-icon name="square"></ion-icon>
      <ion-label>Tab 3</ion-label>
    </ion-tab-button>
  </ion-tab-bar>

</ion-tabs>

In tabs.page.ts add in the function which will add the state to NavigationExtras and route to the tab

routeToTab(tabRoute: string) {
    const navigationExtras: NavigationExtras = {
      state: { id: this.id }
    };
    this.router.navigate(['tabs/' + tabRoute], navigationExtras);
}

Finally, in each of the tab component files add to the constructor and extract out the data passed in by the state object

id: any;

constructor(private router: Router) {
  const navigation = this.router.getCurrentNavigation();
  const state = navigation.extras.state
  this.id = state.id;
}

I think that's it. Hope this helps.