Nativescript Angular Tabview navigation across tabs

Question

I setup my NS app to used tabbed navigation with a login screen by following the writeup here.

I am trying to add a button to the players page that will navigate to the team details page for a specific team.

From what I have read it seems like it should be doable with something like this in the players component

toTeam( event: any ) {
        var teamId = event.object.team;
        this.router.navigate([
            '/tabs/default', { outlets: { teamTab: ['team', teamId] } }
        ])
    }

But every variation that I have tried results in Error: Cannot match any routes.

Does anybody know how to navigate across tabs/outlets?

score 0 · Answer 1 · answered May 05 '20 at 18:19

0

Check in your routing.module.ts, whether the route is defined. It needs to be done something like this.

        { path: '/tabs/default/:teamId', component: XYZComponent, outlet: 'team' },

answered May 05 '20 at 18:19

Venkatesh K

133
1
1
11

My routing module contains `{path: "tabs", loadChildren: () => import("~/app/tabs/tabs.module").then(m => m.TabsModule)}` and then the tabs module contains the child routes just like in the writeup I followed. So as far as I understand all of the routes exist otherwise I wouldn't be able to navigate normally. – bvallerand May 05 '20 at 19:16

bvallerand · Accepted Answer · 2020-05-05T22:42:07.837

I found a solution mostly based on the information I got from this question. Things were slightly different because my app is using <page-router-outlet> instead of <router-outlet> and because of the overall structure of the app.

In the tabs component template I added an id to the bottom navigation so it could be referenced

<BottomNavigation id="bnav">

in the players component I added the following function:

toTeam( event: any ) {
        console.log("Team ID is: " + event.object.teamId);
        // Get the topmost frame so we can get the 'bnav' view from it later
        const topmostFrame: Frame = Frame.topmost();
        // Navigate places in the outlets
        this.re.navigate(
            [
                { 
                    outlets: {  
                        teamTab: ["team", event.object.teamId],
                        playerTab: ["players"], 
                    } 
                }
            ], { relativeTo: this.activeRoute.parent });
        // Get the tabview object from the page and switch it to show the teams tab
        let bNav:TabView = <TabView>topmostFrame.page.getViewById("bnav");
        bNav.selectedIndex = 1;
    }

The <page-router-outlet> meant I couldn't just import Page and use this.page.getViewById("bnav") because the page that the players component is contained within does not encompass the <BottomNavigation>. Getting the topmost frame allowed me to get the page that contained what I needed.

This all works perfectly in my application.

Nativescript Angular Tabview navigation across tabs

2 Answers2

Linked