使用Angular和TypeScript在最新的NativeScript中使用参数进行导航

我想导航到另一个带参数的页面,但我似乎无法找到解释它的文档.我正在使用路线.这是我的路线的一个例子.

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

我想使用在MainPage上选择的参数导航到DetailsPage.这是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"]);
    };
}

插入：下面我添加了详细信息类.

import { Component,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();
        };
    };
}

这是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>

我找到了类似NavigationContext和方法navigateto和navigateFrom的类,但我还没想出如何将NavigationContext发送到Page.或者,如果它甚至应该以这种方式发送.所以问题是,使用Routing导航到另一个页面(不是对话框)并传递参数的最佳方法是什么？

你需要表明你应该在这条路线中有参数：

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

然后,你可以这样传递：

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

在您的DetailsPage中,您可以使用ActivatedRoute服务将参数作为可观察对象获取.