Ionic2 can't hide or show content in another tab from other than the current one?

Ionic Framework ionic-v3
1

I am trying to hide some content and show some other in another tab, immediately before or after I switch to that tab. However, hiding and showing content seems to be working only from within a tab.
I have setup the following plunker to demonstrate and reproduce what I am seeing in my development code.

Tab 1 simulates where a user selects some media. I have provided two buttons in Tab1, namely “Show Player 1” and Show Player 2" which attempt the following
(1) select the target tab “Tab2”
(2) call methods in Page2.ts to perform the hide/show of the desired content, which seems to be currently ignored? My actual content in Tab2 are various players like so

 <ion-card>
<PlyrPlayerComp [hidden]="YTPlayerHide_" #PlyrPlayer></PlyrPlayerComp>
<AMSPlayerComp [hidden]="AMSPlayerHide_" #AMSPlayer></AMSPlayerComp>
...more
</ion-card>

to keep it simple I have used buttons in the plunker to simulate the same as above components.

To verify that the Page2 content show/hide methods are working OK, I have provided temporary test buttons from within target Tab2 to call these methods and which work as expected.

Steps to reproduce:
Run plunker click button “Show Player1”, Tab2 should be selected and only Player1 is displayed (Player2 gets hidden)

Related code:

// code behind tab1
  Player1Show() {
     this.NavController.parent.select(1);
     this.Page2.Player1Show();
     this.Page2.Player2Hide();  
  }

  // 20161130
  Player2Show() {
     // tried to use promise?
     this.NavController.parent.select(1).then(() => {
     this.Page2.Player2Show();
     this.Page2.Player1Hide();  
     });
  }

// code behind tab2
export class Page2 {
  constructor() {
			console.log ( "Page2...Created");
	}
	
// 20161129
 Player1Hide_ = false;
    Player1Hide() {
        this.Player1Hide_ = true;
    }
    Player1Show() {
        this.Player1Hide_ = false;
    }
    
 Player2Hide_ = false;
    Player2Hide() {
        this.Player2Hide_ = true;
    }
    Player2Show() {
        this.Player2Hide_ = false;
    }
}

Note: I have ported the sample bug reproduction code to the latest ionic plunker configuration I believe RC2, so if you prefer ionic RC2 then be my guest and debug the issue on this plunker http://plnkr.co/edit/pD5hbodhHsEo35sSnGDc?p=preview

2

Here is a different plunker using *ngIf same problem, properties on Page2 for hidding and showing content are ignored by ionic2/angular2.

Perhaps someone can explain why I would have to use a prop on some global service and NOT page2?
Thank you.

3

Please tell me we haven’t taken about 8 steps backwards on this. You should not be injecting pages from other pages, and you are making this entire thing WAY more complicated than it needs to be. You don’t ever need to call or define any methods to show or hide anything. You don’t need “showX” and “showY” properties.

You have a media object. It can be one of two types. You have two components, each corresponding to one of the types. I actually have a very similar situation where images are sometimes still and sometimes video. It looks roughly like this:

<video *ngIf="track.flavor === 'video'" [src]="track.src" controls></video>
<img *ngIf="track.flavor === 'still'" [src]="track.src">

This is an embedded component, so it receives its track property as a bound @Input, which is slightly different from your situation, so you can instead declare a service that holds the current track:

class MediaTrack {
  flavor: string; // you can use a TypeScript enum here
  src: string;
}

@Injectable()
export class CurrentTrack {
  track: MediaTrack;
}

export class Page1 {
  constructor(private _curtrack: CurrentTrack, private _nav: NavController) {
  }
  
  somethingHappened() {
    getTrackSomehow().subscribe((track) => {
      this._curtrack = track;
      this._nav.push(Page2);
    }
  }
}

export class Page2 {
   track: MediaTrack;

  constructor(curtrack: CurrentTrack) {
    this.track = curtrack.track;
  }
}

There are better ways to do this with an Observable in CurrentTrack, and you could also just pass the track object via NavParams in this situation, but for unexplained reasons you said you don’t want to do that. However, this should illustrate the fundamental concept.

4

Thanks and sorry for giving you too much trouble. Since four days or so, I am now using my GlobalService.ts to pass my CurrentMedia. I did not factor it out as you did above as my GlobalService still holds only few items at this time.

So yeah, few days ago, I understood (or think so) how the framework wants things to happen.
My app is working regarding the switching of players upon Media user selections or scheduler changes. I was more interested in fully understanding what I was dealing here with (computer science curiosity). The calls from pages to page was just a way to debug and trying to understand what is taking place.

Here is the what the lessons I take from my plunker exercise on this issue:

  1. If a page’s template is based on a property changes affected by only the page, then it’s OK for this property to reside in the page itself.

  2. However, if the property needs to be changed by other “agents” outside the page, then it HAS to be put in a service and injected.

  3. Don’t inject a page into another page to get access to it :slight_smile:

Regarding not wanting to use NavController.push() at least in beta11

  1. it created too much nav history from a user session selecting tabs, causing painful exit from the app.
  2. also popping the players (shared tab or separate pages for that matter) would kill/destroy my player object.

That’s why, way back, I posted the following which remained unanswered and I had to find an alternative to keep moving with my port.

The alternative was to (A) share a tab for all players to keep them alive, and (2) use tabs.select() to avoid navigation history. I hope this clarifies why I stayed away from pushing pages or tabs.

I value all your responses and the tremendous help you provide on this forum.
Thank you.

5

I decided to complete the exercise and transform that plunker of mine into a working demo of the concept
Here it is.

I think it is following all your guidelines and hopefully it will be useful to others.

image