TabView in a a Modal (trouble with routes)


#1

Hi,
I have some troubles using a tabview inside a modal (I m very new to NS).
Inside my modal, I add :

<TabView androidTabsPosition="bottom">

        <page-router-outlet
            *tabItem="{title: 'Home', iconSource: getIconSource('home')}"
            name="homeTab">
        </page-router-outlet>
    
        <page-router-outlet
            *tabItem="{title: 'Browse', iconSource: getIconSource('browse')}"
            name="browseTab">
        </page-router-outlet>
    
        <page-router-outlet
            *tabItem="{title: 'Search', iconSource: getIconSource('search')}"
            name="searchTab">
        </page-router-outlet>
    
    </TabView>

My routes look like this :


const routes: Routes = [
  { path: "", component: FeaturedComponent }, **<--- The page from where the modal is called.**
  {
    path: "second-modal", **<------ The modal itself (that hosts the tabviews)**
    redirectTo: "/(homeTab:home//browseTab:browse//searchTab:search)",
    pathMatch: "full",
    children: [
      { path: "home", component: HomeComponent, outlet: "homeTab" },
      { path: "browse", component: BrowseComponent, outlet: "browseTab" },
      { path: "search", component: SearchComponent, outlet: "searchTab" }
    ]
  }
];

When I try to launch the modal, I get an error saying
Error: Cannot match any routes. URL Segment: ‘home’

Any help?


#2

There are still issues when routing gets more complicated & nested.


#3

I thank you for the info… :slight_smile:


#4

Maybe try moving the children path to siblings like this?

  {
    path: "second-modal",
    redirectTo: "/(homeTab:home//browseTab:browse//searchTab:search)",
    pathMatch: "full"
 },
 { path: "home", component: HomeComponent, outlet: "homeTab" },
 { path: "browse", component: BrowseComponent, outlet: "browseTab" },
 { path: "search", component: SearchComponent, outlet: "searchTab" }