Nativescript: Navigate between router-outlets

Question

For better introduction see the blog post about outlets.

I use a TabView to navigate through my mobile app written with nativescript (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?

Answer 1

I posted the question to the github repository as an issue and got an answer.

The problem was that the navigation was indeed changed, but the selectedIndex of the TabView wasn't changed. When doing this additionally to the navigation change, everything works!

let tabView:TabView = <TabView>this.page.getViewById("tabView");
tabView.selectedIndex = 2;