In my app.component.html, I have set up a TabView like this:
<TabView androidTabsPosition="bottom">
<page-router-outlet
*tabItem="{title: 'Home', iconSource: getIconSource('home')}"
name="homeTab">
</page-router-outlet>
<page-router-outlet
*tabItem="{title: 'Game', iconSource: getIconSource('browse')}"
name="gameTab">
</page-router-outlet>
<page-router-outlet
*tabItem="{title: 'Courses', iconSource: getIconSource('search')}"
name="coursesTab">
</page-router-outlet>
</TabView>
Additionally, in my app-routing.module.ts file, the routing is set up as follows:
const routes: Routes = [
{
path: "",
redirectTo: "/(homeTab:home/default//gameTab:game/default//coursesTab:courses/default)",
pathMatch: "full"
},
{
path: "home",
component: NSEmptyOutletComponent,
loadChildren: "~/app/home/home.module#HomeModule",
outlet: "homeTab"
},
{
path: "game",
component: NSEmptyOutletComponent,
loadChildren: "~/app/game/game.module#GameModule",
outlet: "gameTab"
},
{
path: "courses",
component: NSEmptyOutletComponent,
loadChildren: "~/app/courses/courses.module#CoursesModule",
outlet: "coursesTab"
}
];
@NgModule({
imports: [NativeScriptRouterModule.forRoot(routes)],
exports: [NativeScriptRouterModule]
})
export class AppRoutingModule { }
To navigate from the homeTab section by pressing a button in my home.component.html, I write the following code:
<Button text="Add a course" (tap)="gotoCourses()" class="btn-green" width="50%"></Button>
In home.component.ts, I attempt to navigate to the /courses path upon clicking the button using this method:
constructor(private routerExtensions: RouterExtensions) { }
public gotoCourses(){
this.routerExtensions.navigate(["/courses"]);
}
I have tried various paths for navigation including:
courses
courses/default
//coursesTab
//coursesTab:courses
//coursesTab:courses/default
../coursesTab:courses/default
../coursesTab:courses
../coursesTab
../courses
../courses/default
However, when attempting to navigate, I encounter the error:
Error: Cannot match any routes. URL Segment: 'courses'
Error: Cannot match any routes. URL Segment: 'courses'
at ApplyRedirects.noMatchError ...
It seems there is an issue with my understanding of navigation within the application. Any assistance would be greatly appreciated in resolving this navigation problem. Although I believe it to be a simple solution, I am unable to determine how to navigate to the "Courses" tab by clicking the button. Navigation through tabs works smoothly. If needed, here is a playground demo link: