Nativescript/Angular navigating from one feature module to another with Tabs

Question

I have an issue navigating from one feature module to another feature module. My router structure looks like on the image below. I have seen this type of challenges have been already resolved e.g. this SO question but I do not understand how to combine changing selectedIndex and routing between modules. I'd like to go from CalendarComponent (under Calendar Module) to Event Component (under Home Module) - yellow items on the image.

My AppRoutingModule routes:

const routes: Routes = [
   { path: "", redirectTo: "/login", pathMatch: "full" },
   {
     path: 'login',
     component: LoginComponent
   },
   {
     path: "tabs",
     loadChildren: () => import("~/app/tabs/tabs.module").then(m => m.TabsModule),
   }
 ]

HomeRoutingModule routes:

  const routes: Routes = [
   { path: "", redirectTo: "home" },
   { path: 'home', component: HomeComponent },
   { path: 'event/:id', component: ItemDetailComponent, resolve: { event:      EventsResolver } }
 ]

CalendarRoutingModule routes:

 const routes: Routes = [
   { path: "", redirectTo: "calendar" },
   { path: 'calendar', component: CalendarComponent }
 ]

TabsRoutingModules routes:

 const routes: Routes = [
   {
     path: 'default', 
     component: TabsComponent,
     children: [
         {
           path: 'home',
           component: NSEmptyOutletComponent,
           loadChildren: () => import('~/app/home/home.module').then((m) => m.HomeModule),
           outlet: 'homeTab',
         },
         {
           path: 'calendar',
           component: NSEmptyOutletComponent,
           loadChildren: () => import('~/app/calendar/calendar.module').then((m) => m.CalendarModule),
           outlet: 'calendarTab',
         },
         {
           path: 'plan',
           component: NSEmptyOutletComponent,
           loadChildren: () => import('~/app/plan/plan.module').then((m) => m.PlanModule),
           outlet: 'planTab',
         }
     ]
   }  
 ]

TabsComponent html:

 <StackLayout>
     <TabView androidTabsPosition="bottom" [selectedIndex]="selectedIndex" #tabView (selectedIndexChanged)="tabViewIndexChange(tabView.selectedIndex)">
         <StackLayout *tabItem="{ title: 'Events' }">
             <page-router-outlet name="homeTab"></page-router-outlet>
         </StackLayout>
         <StackLayout *tabItem="{ title: 'Calendar' }">
             <page-router-outlet name="calendarTab"></page-router-outlet>
         </StackLayout>
         <StackLayout *tabItem="{ title: 'Plans' }">
             <page-router-outlet name="planTab"></page-router-outlet>
         </StackLayout>
     </TabView>
 </StackLayout>

TabsComponent controller

  selectedIndex:number = 0
  constructor(
     private routerExtension: RouterExtensions,
     private activeRoute: ActivatedRoute,
     private tabService: TabService) {
   }

   ngOnInit() {
       this.selectedIndex = this.tabService.getTabIndex();
       this.routerExtension.navigate([{ outlets: { homeTab: ["home"], calendarTab: ["calendar"], planTab: ["plan"] }}], { relativeTo: this.activeRoute });
   }

   tabViewIndexChange(args){
    console.log(args);
    console.log('tabs changes');
    this.tabService.setTabIndex(args);
   }

TabService (just used to set and get selectedIndex)

private tabIndex: number = 0

constructor() { }

getTabIndex() {
  return this.tabIndex;
}

setTabIndex(index: number) {
  this.tabIndex = index;
}

CalendarComponent method which should navigate from current route (CalendarComponent) to Home or Home/Event.id. This is the place where I'm not able to navigate to other feature module

onInlineEventSelected(args: CalendarInlineEventSelectedData) {

  const event = <CustomCalendarEvent>args.eventData;
  this.tabService.setTabIndex(0)
  this.router.navigate(["/tabs/default", { outlets: { homeTab: [ "home" ] }}])

}

Any ideas how to configure router.navigate with combination of changing selectedIndex to be able to link from one feature module to another

Nativescript/Angular navigating from one feature module to another with Tabs

0 Answers0