使用Angular和TypeScript在最新的NativeScript中使用参数进行导
发布时间:2020-12-17 09:57:28 所属栏目:安全 来源:网络整理
导读:我想导航到另一个带参数的页面,但我似乎无法找到解释它的文档.我正在使用路线.这是我的路线的一个例子. import { RouterConfig } from '@angular/router';import { nsProvideRouter } from 'nativescript-angular/router';import { MainPage } from './pages
我想导航到另一个带参数的页面,但我似乎无法找到解释它的文档.我正在使用路线.这是我的路线的一个例子.
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服务将参数作为可观察对象获取. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |