/blog/posts/20170505-PassingDataBetweenTabsInIonic2.html about damirscorner-utterances

[damirarh]

Imported comment written by Bryan Hughes on 2017-07-23T23:27:29

Great, regarding: "This will only work, if the requested tab has not been opened before", my app has 3 tabs. The first has events.publish, the other 2 events.subscribe.
Is there any way to initialize the 2 and 3 tabs when loading the app?
The subscribe method returns undefined, because they have not been initialized previously.

[damirarh]

Imported comment written by Damir Arh on 2017-07-24T17:31:21

What exactly is undefined in your case? In my example above I combined two approaches to handle both cases: when the tab is not yet initialized and when it is already initialized. Nothing fails because of an undefined value.

I don't know of a way to initialize a tab in advance without switching to it. Maybe you could try using segments instead of tabs. Then you can have the business logic in the common parent page and pass values to tab components with binding.

[damirarh]

Imported comment written by rudy hadoux on 2017-08-01T09:07:32

Useful, thanks.

[damirarh]

Imported comment written by Dinan Rangga Maulana on 2017-08-04T10:30:26

Great. Thanks a lot ! :)

But, I have a question, how if I want to send value of a variable. Please help me..
On my ts file :

===================================
variable : any;

tab1Root: any = FirstPage;
tab1Params = {getId : this.variable};
tab2Root: any = SecondPage;
tab3Root: any = ThirdPage;

constructor(bla bla bla){
this.variable = this.navParams.data.id; //get value from another page.
}

===================================

The result in my FirstPage when I get the value of that variable is undefined.
On my FirstPage.ts file :

this.id = this.navParams.data.getId;

Variable id is undefined :(

[damirarh]

Imported comment written by Damir Arh on 2017-08-04T18:20:07

By setting a new value to this.variable you haven't changed the value of tab1Params.getId, which is then passed to FirstPage. You should assign the value directly to: this.tab1Params.getId:

this.tab1Params.getId = this.navParams.data.id; //get value from another page.

[damirarh]

Imported comment written by Federico Dávila on 2017-08-18T21:53:22

Hi! I tried to implement this, but nothing happens! The only difference is my 2 tabs are the same page, I just won't to change a flag to show information in a diferent way. Any ideas? Thanks!!

[damirarh]

Imported comment written by Damir Arh on 2017-08-20T07:54:10

It's difficult to say why it doesn't work for you without seeing any code. I've created a small working sample of what I think you want to accomplish. I hope it helps.

[damirarh]

Imported comment written by Federico Dávila on 2017-08-22T20:55:38

Damir, thanks for your help! My problem is: I have a list ordered with 2 differents criterias, and 2 tabs to show this different lists. I need to comunicate the model that tabs has change to reorder my list and show it. I think events are a cool way to do it, because I have not found any other way, but I couldt'n make it work. Can you help me?

[damirarh]

Imported comment written by Damir Arh on 2017-08-26T05:56:24

Unless I'm missing something, you really shouldn't need events to make that work. If you have a list of the same items on each tab with different ordering, you can pass the correct ordering of data on each individual tab when you initialize them as in the example I prepared for you. Each tab will keep that ordering even when you switch between them. If you need to refresh the data when you switch to a different tab, you can put the code ionViewDidEnter lifecycle event.

Alternatively you could use segments instead of tabs. In that case you could use a single instance of the component for both segments and change the ordering in ionChange event.

[damirarh]

Imported comment written by alltej on 2017-10-10T14:59:13

I implemented this. It is calling the method of the subscription/topic. But it is not refreshing the parent page(UI) when I click the back button. I have list page(parent page). Then user select an item in list which navigates to detail page(child). In child page, there is like button. After liking it, it does the necessary update, publish topic, and subscription is triggered (fetches data in backend). From detail page, user can then go back (back button) to list page. But in list page, it is still not refreshing the UI although in backend it is already liked.

[damirarh]

Imported comment written by Damir Arh on 2017-10-15T15:40:29

Which page is subscribed to the topic and fetches the updated data? Is it the parent page? Can you put a sample manifesting the issue on GitHub?