Rob Rob - 1 year ago 206
TypeScript Question

Navigate with parameters in latest NativeScript with Angular and TypeScript

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';

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…

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';

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) {

Here is the template for Detail:

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

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

Answer Source

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:


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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download