Navigating from component Button to Tab in TabView using NativeScript Angular

Question

I have a TabView set up like this in app.component.html:

<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>

Any my routing in app-routing.module.ts like this:

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 { }

Now I wish to navigate from the homeTab by clicking a button in my home.component.html, so I try this:

<Button text="Add a course" (tap)="gotoCourses()" class="btn-green" width="50%"></Button>

An in my home.component.ts i try to navigate to the /courses path:

constructor(private routerExtensions: RouterExtensions) { }

public gotoCourses(){
    this.routerExtensions.navigate(["/courses"]);
}

I have also tried with the paths:

courses
courses/default
//coursesTab
//coursesTab:courses
//coursesTab:courses/default
../coursesTab:courses/default
../coursesTab:courses
../coursesTab
../courses
../courses/default

But I get an error like:

S: ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'courses'
JS: Error: Cannot match any routes. URL Segment: 'courses'
JS:     at ApplyRedirects.noMatchError (file:///data/data/org.nativescript.SimpleStats/files/app/tns_modules/@angular/router/bundles/router.umd.js:2557:20) [angular]
JS:     at CatchSubscriber.selector (file:///data/data/org.nativescript.SimpleStats/files/app/tns_modules/@angular/router/bundles/router.umd.js:2538:33) [angular]
JS:     at CatchSubscriber.error (file:///data/data/org.nativescript.SimpleStats/files/app/tns_modules/rxjs/internal/operators/catchError.js:48:31) [angular]
JS:     at MapSubscriber.Subscriber._error (file:///data/data/org.nativescript.SimpleStats/files/app/tns_modules/rxjs/internal/Subscriber.js:93:26) [angular]
JS:     at MapSubscriber.Subscriber.error (file:///data/data/org.nativescript.SimpleStats/files/app/tns_modules/rxjs/internal/Subscriber.js:73:18) [angular]

It seems my understanding of navigation is completely lacking so please help. I am sure it is an easy fix but I can't seem to figure out how to navigate to the "Courses" tab by clicking my button. Navigating by cling the tabs works fine.

Here is a playground demo: https://play.nativescript.org/?template=play-ng&id=3zF1mB&v=2

You have multiple router outlets active at a time, but while calling navigate method you are passing a path that doesn't have info which router outlet to use. You will have to use relative path to activated route here. — Manoj
– Manoj, Commented Apr 27, 2019 at 8:36
@Manoj Could you elaborate? I've updated the question with relative path's I've tried now but I get the same error. — span
– span, Commented Apr 27, 2019 at 9:49
Can you share a Playground sample where the issue can be reproduced? — Manoj
– Manoj, Commented Apr 27, 2019 at 9:50
@Manoj updated the question with a link to a playground, it contains some junk but should be straightforward enough. — span
– span, Commented Apr 27, 2019 at 10:04
Course page is already loaded in your outlet, what you need here is to switch your tab by updating selected index on tabview. You will use navigate only when you want to open a new detail page on the tab. — Manoj
– Manoj, Commented Apr 28, 2019 at 8:36

Manoj · Accepted Answer · 2019-04-28 12:31:22Z

3

You will use navigate method only to navigate to a new page. In your example Course is already loaded in second router outlet in second tab, so all you have to do is to change the selected index of tab view.

tabView.selectedIndex = 1; // will show the course page

Updated Playground

answered Apr 28, 2019 at 12:31

Manoj

21.9k3 gold badges24 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

span Over a year ago

Thanks, works great! Any way to get it to work with router link? E g [nsRouterLink]="['../../courses/default']" ?

Markus Over a year ago

Thank a lot, this also/still applies for the BottomNavigation and Tab components that will replace TabView.

Collectives™ on Stack Overflow

Navigating from component Button to Tab in TabView using NativeScript Angular

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related