NativeScript + Angular Navigation context

Question

i'm trying to navigate between a list to a details page. Since i've already fetched everything in my list component i'd like to pass the JSON to the details page so that i've already everything I need to render the component.

I tried many things

this._router.navigate(['details', JSON.stringify(item)]) // seems to truncate the JSON
this._router.navigate(['details', item]) // raises an  Cannot match any routes

Then i tried to remove the :item url parameter from the route definition and was trying to use the queryParams parameter which is allowed but i'm unable to read it in the DetailsPage.

What ng2 version are you using, what does app.routes look like? app.modules and the component this is happening in? — George Edwards
– George Edwards, Commented Aug 15, 2016 at 12:59
NativeScript Angular project you could send only single param s, while navigating to second page. My suggestion is to send the param, which you need to make HTTP request and to get the other data or to use global variable in your project to access the JSON from both pages. you could also review my sample project here. - github.com/tsonevn/NGNavClearHistory/tree/navigate_with_params — Nikolay Tsonev
– Nikolay Tsonev, Commented Aug 15, 2016 at 13:02

Otacilio Oliveira · Accepted Answer · 2017-10-17 16:56:38Z

4

This is definitely not an answer to this question because it does not allow you to send a full object, but in case you need to send just some small parameters to another "page", you can accomplish that using query parameters.

this.routerExtensions.navigate(["/chats"], {
    replaceUrl: false,
    queryParams: {
        name: 'Some Name',
        id: 'some-id'
    }
});

You can access them on the other page just like that:

import { ActivatedRoute } from "@angular/router";
[...]

constructor(private route: ActivatedRoute) {}

[...]
if (this.route.snapshot.queryParams) {
    const query = this.route.snapshot.queryParams

    console.log(`name: ${query['name']}`)
    console.log(`id: ${query['id']}`)
}

edited Oct 17, 2017 at 16:56

answered Oct 17, 2017 at 13:10

Otacilio Oliveira

6861 gold badge5 silver badges15 bronze badges

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

Comments

Vladimir Amiorkov · Accepted Answer · 2016-08-17 10:43:36Z

Passing objects while navigating in Angular + NativeScript is not the same as vanila NativeScript. The routing is entirely implemented via angular specifications which means you will need to use their implementation. The current RC5 version of Angular 2 uses the following navigation (routing). You need to create a RouterConfig with all of the possible app routes for example:

const ROUTES: RouterConfig = [
    { path: "", redirectTo: "/home-page", terminal: true },
    { path: "home=page", component: HomePageComponent },
    { path: "second-page", component: SecondPageComponent }
];

You can also make use of parameterized routes and pass some simple string arguments, imagine the URI in a web site page. By doing this you can for example pass some sort of "crippled" string that will help you retrieved the required information by the page you are navigation to. After that in your second page you can subscribe to the ActivatedRoute and retrieve those arguments. Here is an example of that:

the routes:

import { RouterConfig } from '@angular/router';

const ROUTES: RouterConfig = [
    { path: "", redirectTo: "/home-page", terminal: true },
    { path: "home=page", component: HomePageComponent },
    { path: "second-page/:firstArg/:secondArg", component: SecondPageComponent }
];

and the SecondPageComponent:

import { Component, OnInit } from "@angular/core";
import { ActivatedRoute, Router } from '@angular/router';

@Component({
    moduleId: module.id,
    selector: "second-page",
    templateUrl: "second-page.component.html",
    styleUrls: ["second-page.component.css"]
})
export class SecondPageComponent implements OnInit {
    constructor(private _router: Router, private _route: ActivatedRoute) {

    }

    ngOnInit() {
        this._sub = this._route.params.subscribe(params => {
            var parentTitle = params['parentTitle'];
            var tappedTitle = params['tappedTitle'];
            this.hasBack = false;
            this._currentExample = this._exampleItemsService.getParentExampleItem(0);
        });
    }

You can take a look at the nativescript-ui-samples-angular github repo that showcases such navigation and interesting examples. In order to run that repo's {N} project you will need either the free plugin or the pro one.

Collectives™ on Stack Overflow

NativeScript + Angular Navigation context

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related