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

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

세부 사항에 대한 템플리트는 다음과 NavigationContext 및 방법 navigateTo 및 navigateFrom 같은

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

내가 찾은 클래스,하지만 난 Page에 NavigationContext를 보내는 방법을 알아 냈하지 않았습니다. 또는 심지어 그런 식으로 보내야하는 경우. 따라서 질문은 Routing을 사용하여 대화 상자가 아닌 다른 페이지로 이동하고 매개 변수를 전달하는 가장 좋은 방법은 무엇입니까?

Answer 1

당신이이 경로의 매개 변수를 가져야한다고 표현해야 다음

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

, 당신은 그런 식으로 전달할 수있는

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

당신의 DetailsPage 당신은 같은 매개 변수를 얻을 수 있습니다 ActivatedRoute 서비스에서 관찰 가능.