Nativescript Core - Route to same page with Parameters

nativescriptcore

#1

Hi
I have a drawer and I have two options on the drawer both pointing to same page but need to pass different parameters to the page. I need this using Nativescript core. Following is code sample:

<GridLayout columns="auto, *" class="{{ 'sidedrawer-list-item' + (selectedPage === 'First' ? ' selected': '') }}"
                        route="page/mypage?first"  tap="onNavigationItemTap">
                <Label row="0" col="0" text="&#xf015;" class="fa" />
                <Label row="0" col="1" text="First" class="p-r-10" />
            </GridLayout>

            <GridLayout columns="auto, *" class="{{ 'sidedrawer-list-item' + (selectedPage === 'Second' ? ' selected': '') }}"
                route="page/mypage?second" tap="onNavigationItemTap">
                <Label row="0" col="0" text="&#xf1ea;" class="fa" />
                <Label row="0" col="1" text="Second" class="p-r-10" />
            </GridLayout>

Following is how I am reading and routing the page:

export function onNavigationItemTap(args: EventData): void {
    const component = <GridLayout>args.object;
    const componentRoute = component.get("route");

    topmost().navigate({
        moduleName: componentRoute,
        transition: {
            name: "fade"
        }
    });
}

Can someone please guide me on this?

Thanks,
Rakesh


#2

You should pass a context to the navigate function. This context becomes the navigationContext for the page you are navigating to. Eg,

exports.onTap = function(args) {
	let url = args.object.route;
	let params = args.object.params;

	Frame.topmost().navigate({
		moduleName: url,
		context: {
			param: params
		},
		transition: {
			name: "fade"
		}
	})
}

You can define params as another element for your GridLayout and convert it to an object when you pass it to the context. Depending on your logic and program, you might not want to define the params in the XML. Instead you’d create it in your app, based on what is tapped, convert that to a context, and pass that context to the next page when navigating.

See more here:
https://docs.nativescript.org/core-concepts/navigation#navigate-and-pass-context


#3

Thank you so much @pentool. Adding param to GridLayout helped me.

<GridLayout columns="auto, *" class="{{ 'sidedrawer-list-item' + (selectedPage === 'Second' ? ' selected': '') }}"
                route="page/mypage?second" params="myParam" tap="onNavigationItemTap">
                <Label row="0" col="0" text="&#xf1ea;" class="fa" />
                <Label row="0" col="1" text="Second" class="p-r-10" />
            </GridLayout>