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

Posted 2023-02-19

【中文标题】使用 Angular 和 TypeScript 使用最新 NativeScript 中的参数进行导航

【英文标题】：Navigate with parameters in latest NativeScript with Angular and TypeScript

【发布时间】：2016-11-21 10:56:24

【问题描述】：

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

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，但我还没有弄清楚如何将NavigationContext 发送到Page。或者如果它甚至应该以这种方式发送。那么问题来了，使用Routing 导航到另一个页面（不是对话框）并传递参数的最佳方式是什么？

【参考方案1】：

你需要表明你应该在这个路由中有参数：

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

那么，你可以这样传递：

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

在您的DetailsPage 中，您可以使用ActivatedRoute 服务将参数作为可观察的。

【讨论】：

我尝试了这个解决方案，一旦我更改了方法调用以在“详细信息”前面放置一个正斜杠，因此在代码中它是 this._router.navigate(["/details", selectedItem.id]); 新页面显示。然而，即使屏幕会显示我注意到 ngOnInit 没有被调用。经过一些调试，我发现apply_redirects.js 中的expandPathsWithParams(segment, routes, paths, outlet, allowRedirects) 正在抛出NoMatch 异常。所以构造函数运行但 ngOnInit 没有。

当页面显示时，ngOnInit 是否被调用？可以在这里添加DetailsPage 组件吗？

ngOnInit 没有被调用。在调用它之前，角度核心代码中的expandPathsWithParams 中会引发异常。我添加了详细组件和模板代码。唯一要知道的是我将 main.ts 中的行更改为 this._router.navigate(["/details", selectedItem.name]);.

我能够首先通过一个测试项目证明这是可行的，然后通过从源页面和目标页面中删除几乎所有内容来证明这一点。我目前正在尝试恢复所有功能并遇到各种问题。但无论如何我都在检查它是否正确。谢谢。

+Doron 有没有机会链接到文档或有关 ActivatedRoute 的任何解释？