NativeScript + Angular Navigation context

问题

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.

回答1:

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']}`)
}

回答2:

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.

来源：https://stackoverflow.com/questions/38943048/nativescript-angular-navigation-context

标签

angular

nativescript