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

Question

我想导航到另一个带有参数的页面，但似乎找不到能很好地解释它的文档。我正在使用路线。下面是我的路线示例。

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

我想用主页上选择的参数导航到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, 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();
        };
    };
}

这是详细信息的模板：

<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导航到另一个页面（而不是对话框）并传递参数的最佳方式是什么？

Answer 1

您需要表示您应该在这个路由中有参数：

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

然后，你可以通过这种方式：

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

在您的DetailsPage中，您可以通过ActivatedRoute服务将参数作为可观察的参数获取。