ionic-team / ionic-v3

The repo for Ionic 3.x. For the latest version of Ionic, please see https://github.com/ionic-team/ionic
Other
128 stars 85 forks source link

Navigate between different pages containing tabs, wrong tab is shown #773

Open ionitron-bot[bot] opened 5 years ago

ionitron-bot[bot] commented 5 years ago

Original issue by @iget-master on 2018-03-10T19:58:23Z

Ionic version: (check one with "x") (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1) [ ] 2.x [x] 3.x [ ] 4.x

I'm submitting a ... (check one with "x") [x] bug report [ ] feature request

Please do not submit support requests or "How to" questions here. Instead, please use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior: I've two different lazy loaded pages, both containing ion-tabs with two tabs inside it.

Page X:

<ion-tabs tabsPlacement="top">
  <ion-tab [root]="'TabAPage'" tabTitle="Tab A"></ion-tab>
  <ion-tab [root]="'TabBPage'" tabTitle="Tab B"></ion-tab>
</ion-tabs>

Page Y:

<ion-tabs tabsPlacement="top">
  <ion-tab [root]="'TabCPage'" tabTitle="TabC"></ion-tab>
  <ion-tab [root]="'TabDPage'" tabTitle="TabD"></ion-tab>
</ion-tabs>

I start navigating to Page X, okay, everything normal. Switch between tabs works fine. But, when I navigate to Page Y, that should only show tabs C and D, starts with tab A (or B, the latest shown on page X).

When I switch between tabs on page Y, instead of switching between C and D, I switch between A and D.

If I start the process navigating from Page Y, the result is the same, it works initially until I navigate to another page containing tabs.

Expected behavior:

It should not mix up contents! Makes no sense!!!

Steps to reproduce:

Explained above

Related code:

I'm unable to create an sample code now, but I'll do ASAP!

Other information:

This looks like a problem with NavCtrl, since I need to do this.nav.parent.setRoot() to switch between pages, it replaces the parent view, but doesn't reset the child view.

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

cli packages: (/home/esoares/.npm-global/lib/node_modules)

    @ionic/cli-utils  : 1.19.1
    ionic (Ionic CLI) : 3.19.1

global packages:

    cordova (Cordova CLI) : 7.0.1 

local packages:

    @ionic/app-scripts : 3.1.8
    Cordova Platforms  : android 6.2.3
    Ionic Framework    : ionic-angular 3.9.2

System:

    Android SDK Tools : 26.0.2
    Node              : v8.9.4
    npm               : 5.6.0 
    OS                : Linux 4.13

Environment Variables:

    ANDROID_HOME : /home/esoares/android-sdk/

Misc:

    backend : legacy
kgh0 commented 5 years ago

My App work well, when in an old environment as blow cli packages: @ionic/cli-utils : 1.19.2 ionic (Ionic CLI) : 3.20.0

global packages:

cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)

local packages:

@ionic/app-scripts : 3.2.1
Cordova Platforms  : android 7.1.4 ios 4.5.4
Ionic Framework    : ionic-angular 3.5.3

System:

Android SDK Tools : 25.2.5
Node              : v8.11.2
npm               : 6.1.0
OS                : Windows 8.1

Angular: Angular CLI: 6.0.8 Node: 8.11.2 OS: win32 x64 Angular: 4.4.7

But it not. when I use a high version angular , I think it probably relate width angular . How to resolve this problem well.