Navigation between router-outlets doesn't work

[tsonevn]

From @christian-kolb on October 5, 2017 9:29

Did you verify this is a real problem by searching Stack Overflow and the other open issues in this repo?

Yes, I even asked a question there and put a bounty on it without any answers:
https://stackoverflow.com/questions/46443998/nativescript-navigate-between-router-outlets

Tell us about the problem

I'm using a tab navigation with nested router outlets as described in the official nativescript blog post here: https://www.nativescript.org/blog/using-nested-router-outlets-with-nativescript-and-angular
The basic navigation works perfectly. But when I want to navigate from one router outlet to another the view doesn't refresh. Or in more detail: The other router outlet I want to navigate to is updated but the tab view doesn't switch to the other router outlet but stays in the current one.
I already added that as a comment there but there was no reaction yet.

Which platform(s) does your issue occur on?

iOS for sure, I'm in the process of getting the android version running to be able to tell if it's a problem for both.

Please provide the following version numbers that your issue occurs with:

• CLI: 3.2.1
• Cross-platform modules: 3.2.0
• Runtime(s): ios: 3.2.0
• Plugin(s):
  • "nativescript-angular": "~4.2.0",
  • "nativescript-appversion": "^1.4.1",
  • "nativescript-iqkeyboardmanager": "^1.1.0",
  • "nativescript-loading-indicator": "^2.3.2",
  • "nativescript-localstorage": "^1.1.5",
  • "nativescript-theme-core": "~1.0.2",
  • "nativescript-videoplayer": "^3.0.9",

Please tell us how to recreate the issue in as much detail as possible.

Setup a tab navigation with multiple router-outlets. Each with one overview that the tav navigation itself navigates to and one detail view. Now put in a link (in code or ns-link) that navigates to the detail view of the other router outlet. See code examples in the following description:

Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.

I'm going to copy in the code and description I provided on the Stackoverflow:

I use a TabView for navigation (ProtectedComponent).

<TabView 
  #tabView 
  tabsBackgroundColor="#f57c00" selectedTabTextColor="#B23010"
  [(ngModel)]="selectedIndex"
  (selectedIndexChanged)="tabViewIndexChange(tabView.selectedIndex)">

  <StackLayout *tabItem="{iconSource: 'res://tab-icons/cats'}">
    <cats-tab></cats-tab>
  </StackLayout>

  <StackLayout *tabItem="{iconSource: 'res://tab-icons/dogs'}">
    <dogs-tab></dogs-tab>
  </StackLayout>
</TabView>

This is part of the component code relevant for the navigation:

navigateToCatsRoot() {
  this.router.navigate([
    '/protected',
    { outlets: { catOutlet: ['cats'] } }
  ]);
}

navigateToDogsRoot() {
  this.router.navigate([
    '/protected',
    { outlets: { dogOutlet: ['dogs'] } }
  ]);
}

tabViewIndexChange(index: number) {
  switch(index) {
    case 0: 
      this.navigateToCatsRoot();
      break;
    case 1:
      this.navigateToDogsRoot();
      break;
  }
}

Every tab just contains the router outlet configuration, for example:

<router-outlet name="catOutlet"></router-outlet>

The routing is setup in the following way:

{ path: "", redirectTo: "/login", pathMatch: "full" },
{ path: "login", component: LoginComponent },
{ path: 'protected', component: ProtectedComponent, children: [
    { path: 'cats', component: CatsComponent, outlet: 'catOutlet'},
    { path: 'cat/:id', component: CatDetailComponent, outlet: 'catOutlet'},
    { path: 'dogs', component: DogsComponent, outlet: 'dogOutlet'},
    { path: 'dog/:id', component: DogDetailComponent, outlet: 'dogOutlet'},
  ]},

The tab navigation works like a charm. I can navigate through the tab navigation to the different outlets and I can also navigate from one outlet to a detail page of that outlet:

this.router.navigate(
    ['/protected', { outlets: { catOutlet: ['cat', cat.id] } }]
);

The problem I'm running into is as soon as I'm trying to jump from one detail view in one outlet into the other detail view of the other outlet. So if I'm calling the following from the cat detail view:

this.router.navigate(
    ['/protected', { outlets: { dogOutlet: ['dog', dog.id] } }]
);

I don't get any kind of error but nothing seems to happen. As soon as I'm switching to the outlet by using the tab navigation (which still works) I see the detail dog view for a very short time before it's resetting to the dogs overview (which is what the tab navigation should do).

This means that the dogOutlet is actually updated with the right navigation and component but doesn't switch to the view / outlet. The component is loaded, I verified that with logging in the OnInit of the dog detail view. It just doesn't switch to that outlet and shows that outlet.

How is it possible to not just update that outlet but also switch over to it as it works for the overview components as with the tab view? Please let me know if you need any additional information or when I should try something.

Copied from original issue: NativeScript/NativeScript#4920

[tsonevn]

Hi @christian-kolb,
If I understand you correctly, you are expecting the TabView selectedIndex to be changed automatically, while navigation from one router-outlet page to another router outlet. In your case from catOutlet to dogOutlet.

If this is the case, I would like to mention that this is the expected behavior and the router will not trigger changing the TabView index automatically. Regarding that, you would suggest changing the index manually, while you need to navigate from one router-outlet to the another inside the TabView. This could be done for example on Button tap event. For your convenience, I am attaching GIF file from the simulator and the project of Sebastian Witalec, which I used for testing with the needed changes, which demonstrates the case.

If the case is a difference, please provide working sample app which demonstrates the problem.

Archive.zip

[christian-kolb]

@tsonevn You're absolutely right. That was the missing part. Thanks a lot for your awesome help!

[christian-kolb]

This issue can then be closed.

[christofferfleat]

Sorry but how this is intended behavior is beyond me, it just confuses developers and creates messy and buggy code. The navigation function should automatically check if it's located in a different tabItem and set the selectedIndex accordingly. If I decide to change the order of the tabItems in the future I shouldn't also have to worry about setting the correct selectedIndex somewhere else that's unrelated to the TabView code, you're purposefully creating bugs in peoples apps by doing this. Very poor design, as with a lot of the current component APIs sadly. ALSO you can't really get a hold of the TabView instance if its located at the root of your application and the navigation happens in any of the children of that root module.

[flodaniel]

@christofferfleat totally!
Every couple of weeks a question again if setting the selectedIndex is really the correct way and then i do another research, because this is just so confusing and not at all what you would expect.
How is it even possible that the currently visible view does not reflect the actual navigation state.
We have our own shared service that works with the BottomNavigation Instance and it is sooooo messy.
Especially because navigation does not occur within a Page-router-oulet as soon as you leave it by changing the selectedIndex. For example if you want to switch the tab but at the same time reset the navigation of the tab you are leaving. It is IMPOSSIBLE to this, without the user seeing a navigation, he is not expecting..

Really crazy design.

[faisalansari20]

I thought I had some issue in code. Then I started to find solution to this and came here. Totally agree with @christofferfleat . Navigation mechanism should detect routing between tabs. Changing tab index manually every where in app is not right approach.