in my Nativescript+Angular app I'm using a BottomNavigation with TabStrip.
app.routing.ts:
const routes: Routes = [
{ path: "", redirectTo: "/login", pathMatch: "full" },
{ path: "login", component: LoginComponent },
{ path: "tabsWrapper", component: TabsWrapperComponent, loadChildren: "./tabsWrapper/tabsWrapper.module#TabsWrapperModule", canActivate: [AuthGuard] }
];
After the login, I navigate to tabsWrapper:
this.routerExtensions.navigate(["tabsWrapper"], { clearHistory: true }).catch(err => console.log(err));
This is the routing of taspWrapper, tabsWrapper-routing.module.ts:
const routes: Routes = [
{
path: "",
redirectTo: "home",
pathMatch: "full"
},
{ path: "home", loadChildren: "../home/home.module#HomeModule", outlet: "homeTab" },
{ path: "subscriptions", loadChildren: "../subscriptions/subscriptions.module#SubscriptionsModule", outlet: "subscriptionsTab" }
];
There are two tabs, the "Home" tab and the "Subscriptions" tab; there are both lazy-loaded modules.
tabsWrapper.component.html:
<BottomNavigation selectedIndex="0" (selectedIndexChanged)="onSelectedIndexChanged($event)">
<TabStrip (itemTap)="onItemTapped($event)">
<TabStripItem title="home">
<Label class="tab-title" text="Home"></Label>
</apabStripItem>
<TabStripItem title="subscriptions">
<Label class="tab-title" text="Subscriptions"></Label>
</TabStripItem>
</TabStrip>
<TabContentItem>
<GridLayout>
<page-router-outlet name="homeTab"></page-router-outlet>
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout>
<page-router-outlet name="subscriptionsTab"></page-router-outlet>
</GridLayout>
</TabContentItem>
</BottomNavigation>
This is the routing of the home module home-routing.module.ts:
const routes: Routes = [
{ path: "", redirectTo: "home" },
{ path: "itemDetails/:itemId", component: ItemDetailsComponent },
{ path: "home", component: HomeComponent }
];
In the home component there are some items retrieved by services. When I tap on them, it redirects correctly to the item details page. For UI choise I can't put a back button on header, so what I'm trying to do is that if I am in the item details page, if I tap on Home Tab it has to go back home (and I can't use just a navigation.back() because then I'll have to add some routes which from the detail page brings you to a second detail page).
As you can notice I added (itemTap)="onItemTapped($event)" on tabsWrapper component, and it has to handle the behaviour:
onItemTapped(newIndexObj) {
const isInSameTab = newIndexObj.index === this.selectedTab ? true : false;
if (isInSameTab) {
if (this.selectedTab === 0) {
this.routerExtensions.navigate(['../home'], {
clearHistory: true
});
/*
this.routerExtensions.navigate(['/tabsWrapper/{homeTab:home}/home'], {
clearHistory: true
});
this.routerExtensions.navigate(['/tabsWrapper/'], {
clearHistory: true
});
this.router.navigate(["../"], { });
*/
}
}
}
As you can see I tried a lot of ways but none of them works; if I use "home" it gives me the error "Error: Cannot match any routes. URL Segment: 'home'", same if I use "tabsWrapper".
So, I am in the detail page inside the "home" tab and by pressing on the "Home" tab I want to go back to the list of items from the detail page (the route "/home" of the home.module.ts module), and this is the structure of app:
If it can helps, I put a breakpoint in onItemTapped() function and I debug this.router.url: "/tabsWrapper/(homeTab:home/itemDetails/6f92b723-7938-4d26-9262-a3f92846b3c8//subscriptionsTab:subscriptions/subscriptions)"
I found the solution:
this.router.navigate([{ outlets: { "homeTab": ["home"] } }], { relativeTo: this.route });
I had to explicit the outlet