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?

Doron Brikman · Accepted Answer · 2016-07-19 10:11:12Z

12

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.

edited Jul 19, 2016 at 10:11

answered Jul 18, 2016 at 19:02

Doron Brikman

2,5941 gold badge19 silver badges17 bronze badges

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

5 Comments

Rob Over a year ago

I tried this solution and once I changed the method call to put a forward slash in front of "details" so in code it is this._router.navigate(["/details", selectedItem.id]); the new page displays. However even though the screen would display I noticed the ngOnInit was not getting called. After some debugging I found that expandPathsWithParams(segment, routes, paths, outlet, allowRedirects) in apply_redirects.js is throwing a NoMatch exception. So the constructor runs but ngOnInit does not.

Doron Brikman Over a year ago

when the page is displayed, does the ngOnInit getting invoked?. can you add the DetailsPage component here?

Rob Over a year ago

ngOnInit is not getting invoked. Before it is called there is an exception thrown in expandPathsWithParams in the angular core code. I have added the detail component and template code. The only other thing to know is that I changed line in main.ts to this._router.navigate(["/details", selectedItem.name]);.

Rob Over a year ago

I was able to prove this works first by a test project and then by cutting practically everything out of the the source and target pages. I am currently attempting to get all the functionality back in and having various problems. But I am checking this as correct anyway. Thanks.

Raymond Camden Over a year ago

+Doron Any chance you can link to docs or any explanation for ActivatedRoute?

Collectives™ on Stack Overflow

Navigate with parameters in latest NativeScript with Angular and TypeScript

1 Answer 1

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Related