animations - Navegue con parámetros en la última versión de NativeScript con Angular y TypeScript

nativescript navigation animations

Question

Quiero navegar a otra página con parámetros, pero parece que no puedo encontrar documentación que lo explique bien. Estoy usando rutas Aquí hay un ejemplo de mis rutas.

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, {})
];

Quiero navegar a DetailsPage con los parámetros de lo que se seleccionó en MainPage. Aquí hay un extracto de 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"]);
    };
}

Insertado: A continuación agregué la clase de detalles.

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();
        };
    };
}

Aquí está la plantilla para 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>

He encontrado clases como NavigationContext y métodos navigateTo y navigateFrom , pero no he descubierto cómo enviar el NavigationContext a la Page . O si incluso debería enviarse de esa manera. Entonces, la pregunta es, ¿cuál es la mejor manera de usar Routing para navegar a otra página (no un diálogo) y pasar parámetros?

Answer 1

necesita expresar que debe tener parámetros en esta ruta:

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

entonces, puedes pasarlo de esa manera:

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

en su página de detalles puede obtener los parámetros como observables con el servicio ActivatedRoute .