Navigate with parameters in latest NativeScript with Angular and TypeScript

Question

I want to navigate to another page with parameters, but I can't seem to find documentation that explains it well. I am using routes. Here is an example of my routes.

import { RouterConfig } from '@angular/router';
import { nsProvideRouter } from 'nativescript-angular/router';
import { MainPage } from './pages/main/main.component';
import { DetailsPage } from './pages/details/details.component';

export const routes: RouterConfig = [
    { path: "", component: MainPage },
    { path: "details", component: DetailsPage }
];

export const APP_ROUTER_PROVIDERS = [
    nsProvideRouter(routes, {})
];

I want to navigate to the DetailsPage with the parameters of what was selected on MainPage. Here is an excerpt of MainPage:

import { Page } from 'ui/page';
import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { Entity } from '../../shared/entity/entity';

@Component({
    selector: "main",
    templateUrl: "pages/main/main.html",
    styleUrls: ["pages/main/main-common.css", "pages/main/main.css"]
})
export /**
 * MainPage
 */
class MainPage {

    constructor(private _page: Page, private _router: Router) { }

    onNavigate(selectedItem: Entity) {
        // Can't figure out how to get selectedItem to details…
        this._router.navigate(["/details"]);
    };
}

Inserted: Below I added the detail class.

import { Component, OnInit, OnDestroy } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Entity } from '../../shared/entity/entity';
import { EntityModel } from '../../shared/entity/entity.model';

@Component({
    selector: "detail",
    templateUrl: "pages/detail/detail.html",
    styleUrls: ["pages/detail/detail-common.css", "pages/detail/detail.css"],
    providers: [EntityModel] 
})
export /**
 * DetailPage
 */
class DetailPage implements OnInit, OnDestroy {

    entity: Entity;

    private _paramSubcription: any;

    constructor( private _activatedRoute: ActivatedRoute, private _entityModel: EntityModel ) { }

    ngOnInit() {
        console.log("detail ngOnInit was called.");
        let entityName: string;
        this._paramSubcription = this._activatedRoute.params.subscribe(params => entityName = params['id']);
        this.entity = this._entityModel.entityNamed(entityName);
    };

    ngOnDestroy() {
        if (this._paramSubcription) {
            this._paramSubcription.unsubscribe();
        };
    };
}

Here is the template for Detail:

<ActionBar [title]="entity.name"></ActionBar>
<ListView [items]="entity.items">
    <Template let-item="item">
        <StackLayout>
            <Label [text]="item.name"></Label>
            <Label [text]="item.description"></Label>
        </StackLayout>
    </Template>
</ListView>

I have found classes like a NavigationContext and methods navigateTo and navigateFrom, but I haven't figured out how to send the NavigationContext to the Page. Or if it even should be sent that way. So the question is, what is the best way to use Routing to navigate to another page (not a dialog) and pass parameters?

Answer 1

you need to express that you should have parameters in this route:

export const routes: RouterConfig = [
    { path: "", component: MainPage },
    { path: "details/:id", component: DetailsPage }
];

then, you can pass it that way:

this._router.navigate(["/details", selectedItem.id]);

in your DetailsPage you can get the parameters as an observable with the ActivatedRoute service.