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-19T10:11:12.590

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 '16 at 10:11

answered Jul 18 '16 at 19:02

Doron Brikman

2,444
1
16
17

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. – Rob Jul 19 '16 at 05:22
when the page is displayed, does the `ngOnInit` getting invoked?. can you add the `DetailsPage` component here? – Doron Brikman Jul 19 '16 at 10:11
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 Jul 19 '16 at 16:59
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. – Rob Jul 23 '16 at 14:19
4

+Doron Any chance you can link to docs or any explanation for ActivatedRoute? – Raymond Camden Oct 05 '16 at 18:42

Navigate with parameters in latest NativeScript with Angular and TypeScript

1 Answers1