How to pass parameters from a Tab-page to Tabs?

Ionic Framework
1

My application is driving some devices identified by their ID.

The app contains a tab-page with 2 tabs: Left and Right. I basically followed the template of ionic. Both Left and Right need to know the ID.

When I click on a button, the routing system leads me to /tab-page/:ID. Then the default tab is Left. The tab-page reads the ID from

this.activatedRoute.snapshot.paramMap.get('ID');  (in ionViewWillEnter).

I want to pass the ID to the Left and to the Right elements.

My first approach was the following:

  • the tab-page writes the ID in a Global variable
  • Left reads the ID from the Global variable in ionViewDidEnter

Issue: sometimes, Left is entered before the tab-page has read the params so it reads an old value from the Global.

Second approach:

  • the tab-page published an Event after reading the ID: this.events.publish(‘new_ID’, id);
  • Left subscribes to the event to get the ID

ngOnInit(){
this.events.subscribe(‘new_id6_index’, (data)=>{ console.log(…); });
}

Issues: sometimes, the event is published once but read twice by Left, as if Left was created twice. These two instances of Left block each other. In app.routing.module, the preloadingStrategy (PreloadAllModules or default) has no impact.

Third approach

  • same as the second one, but I add a timer before the event is published. This is supposed to ensure that Left has opened.
    setTimeout(() => {this.events.publish('new_id6_index', aa);},200);

It is not really clean but it works.

Question: what is the best practice in this domain?

Thanks!