最新のNativeScriptで角型とTypeScriptを使用してパラメータを移動する

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

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, 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などのクラスを発見したが、私はPageにNavigationContextを送信する方法を考え出したていません。それともそれを送信しなければならない場合でも。したがって、問題は、Routingを使用して別のページ（ダイアログではない）に移動し、パラメータを渡す最も良い方法は何ですか？

Answer 1

あなたはこのルートのパラメータ持つべきであると表明する必要があります。そして、あなたがそのように渡すことができ

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

を：あなたのDetailsPageで

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

あなたのようにパラメータを取得することができますサービスActivatedRouteで観測可能です。