Passing data from service from parent to child tabs

Ionic Framework ionic-v3
1

Hi All,
I want to pass some parameters to tabs and I use NavParams. Everything goes well when I fill data/parameters in constructor but in my case I want to get data from service (I have same data on both tabs but the template will be different so I don’t want to get data each time user enters tab but once for both tabs). So I call my service in agOnInit() but it seems that parameters passed in NavParams are created earlier so on tabs I have empty params object. Any suggestions how to do this?
Heres my code:
my master tabs template:
<ion-content> <ion-tabs> <ion-tab [root]="MyTab1" [rootParams]="myListParam" tabTitle="Tab1" tabIcon="pulse"></ion-tab> <ion-tab [root]="MyTab2" [rootParams]="myListParam" tabTitle="Tab2" tabIcon="chatbubbles"> </ion-tab> </ion-tabs> </ion-content>

my .ts file:

`
import {Page, Modal, NavController, NavParams} from ‘ionic-angular’;
import {MyTab1} from ‘…’;
import {MyTab2} from ‘…’;
import {MyServiceService} from ‘…’;

@Page({
  templateUrl: '...',
  providers: [MyService]
})
export class MyTabs {

  private MyTab1: any;
  private MyTab2: any;
  private nav: NavController;
  private myListParam: string[];
  private myService: MyService;

  constructor(nav: NavController, service: MyService){

    this.nav = nav;
    this.MyTab1 = MyTab1;
    this.MyTab2 = MyTab2;
    this.myService = service;
    //this.myListParam = ['aaaa','bbbbb'] //this works!!!!
  }

  ngOnInit() {
      this.myService.getAll().subscribe(
      data=>{this.myListParam = data;
      console.log(this.myListParam)}
  );
 }
}

`

and finally my child tab:

`
import {Page, NavParams} from ‘ionic-angular’;

@Page({
  templateUrl: '..',
})
export class MyTab1 {

  private myList: string[];

  constructor(param: NavParams) {
    this.myList = param.data;
    console.log(param);    //result: NavParams {data: Object} where data is empty
    console.log(this.racesList); // result: Object {}
  }
}

`

any help?

Thanks!

2

I wonder if something like this might work. Ditch myListParam and expose the underlying observable via a function:

@Page({
  ...
  pipes: [AsyncPipe]
})
export class MyTabs {
  ...
  retrieveList(): Observable<string[]> {
    return this.myService.getAll();
  }

<ion-tab [root]="MyTab1" [rootParams]="retrieveList() | async" tabTitle="Tab1"></ion-tab>
3

@rapropos thanks for suggestion unfortunately it did’t work.

Today I was thinking about creating another service that will be provider for child tab. And in master class (MyTabs) I’m gonna fill that service with data but it’s gonna be weird and after some thoughts i’m pretty sure it’s also not going to work.