How to pass parameter from Tabs container to one tab in ionic 4

Question

I have a ionic tabs app and need to pass parameter from TabsPage.ts to Tab2Page.ts in order to use it in Tab2Page.html. The tabs work with routing system. I googled around but found nothing helpful. Any help is appreciated.

TabsPage.ts:

    import { Component } from '@angular/core';

    @Component({
      selector: 'app-tabs',
      templateUrl: 'tabs.page.html',
      styleUrls: ['tabs.page.scss']
    })
    export class TabsPage {
        paramToPass: string; 
        constructor() {
          paramToPass = 'test';
    }

Tab2Page.ts:

    import { Component} from '@angular/core';

    @Component({
      selector: 'app-tab2',
      templateUrl: 'tab2.page.html',
      styleUrls: ['tab2.page.scss']
    })
    export class Tab2Page  {

    constructor() {
      //here I need to get paramToPass parameter
    }
    }

TabsPage.html:

    <ion-tabs>
      <ion-tab-bar slot="bottom">   
        <ion-tab-button tab="tab2">
          <ion-icon name="apps"></ion-icon>
          <ion-label>Tab Two</ion-label>
        </ion-tab-button>
      </ion-tab-bar>
     </ion-tabs>

Tabs router module:

    import { NgModule } from '@angular/core';
    import { RouterModule, Routes } from '@angular/router';
    import { TabsPage } from './tabs.page';

     const routes: Routes = [
      {
        path: 'tabs',
        component: TabsPage,
        children: [
      {
         ...
      {
         path: 'tab2',
         children: [
           {
             path: '',
             loadChildren: () =>
             import('../tab2/tab2.module').then(m => m.Tab2PageModule)
           }
         ]
       },

      ]
      },
       ...
      {
        path: '',
        redirectTo: '/tabs/tab1',
        pathMatch: 'full'
      }
      ];

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

Answer 1

Try passing your data thru your tabs by using the Input() property:

See Angular Doc's: @Input()-Property