Transfer values from the Tabs-controller to each individual Tab?

Hi!

Tabs can have childs. Each individual child is a Tab.

Is there a way to transfer values from the Tabs-controller to each individual Tab? Or is there a way to fetch values by the Tabs-controller, when I want to request them from an Tab-instance?

… BUT all without usage of a service as a “transfer bridge”?

Tabs component is used like basic usage in the documentation, so there’s no magic …

import { Tab1 } from './tab1-page';
import { Tab2 } from './tab2-page';

@Component({
  template: '
    <ion-tabs>
      <ion-tab [root]="tab1"></ion-tab>
      <ion-tab [root]="tab2"></ion-tab>
    </ion-tabs>'
})
export class MyTabs {
  tab1: Tab1;
  tab2: Tab2;
  
  public myFieldIWantToShareWithEachTab: any; // <----- This is what I look for ...
}

And this could be an individual Tab-child …

@Component({ template: '<ion-content>Tab 1</ion-content>' })
export class Tab1 {
  public getMyFieldIWantToShareFromTheTabsController(): any {

    // --->>> how, without usage of service? <<<---

  }
}

How to access the value in myFieldIWantToShareWithEachTab from the tabs controller when I’m inside of a tab instance? Or how can I “push” the value to the constructor of each tab (the other way)?

Would I have to use NavParams or similar? Something in the html part of the Tabs component near [root]='...'?

Nevermind. I found it …

You can also pass some parameters to the root page of the tab through rootParams. Below we pass chatParams to the Chat tab:

<ion-tabs>
 <ion-tab [root]="chatRoot" [rootParams]="chatParams" tabTitle="Chat" tabIcon="chat"></ion-tab>
</ion-tabs>
export class Tabs {
  chatRoot = ChatPage;

  // set some user information on chatParams
  chatParams = {
    user1: 'admin',
    user2: 'ionic'
  };

  constructor() {

  }
}

And in ChatPage you can get the data from NavParams:

export class ChatPage {
  constructor(navParams: NavParams) {
    console.log('Passed params', navParams.data);
  }
}