在 nativescript 中的路由之间传递参数答案

【问题标题】：Pass parameters between routes in nativesscript在 nativescript 中的路由之间传递参数
【发布时间】：2016-08-21 01:39:03
【问题描述】：

在 NativeScript 应用程序中，我有两条路线如下：

{ path : "boxes" , component : BoxesPage } ,
{ path : "card" , component : CardPage } ,

在 BoxesPage 中，我试图像这样向 CardPage 传递一些东西：

constructor ( private _routerExtention : RouterExtensions , private _router : Router) {
    }

onItemTap ( _box ) {
        let navigationExtras : NavigationExtras = {
            queryParams : { 'box' : _box } ,
            fragment    : 'anchor'
        };
        this._router.navigate( [ '/card' ] , navigationExtras );
    }

然后在 CardPage 组件中：

 ngOnInit () : any {
        this.route.params.subscribe( ( _box : Box ) => {

                console.log( _box );   //undefined or {}

        } );
        return undefined;
    }

问题是：

这是正确的方法吗？

我应该如何在 CardPage 中获取我的盒子对象？

值得一提的是，我正在使用带有 NativScript 的 Angular2。

我已经尝试了所有方法，但不幸的是文档非常糟糕。

提前致谢。

【问题讨论】：

您是否尝试过使用 angular2 文档中描述的路由参数？ angular.io/docs/ts/latest/guide/router.html#!#configuration 注意：{ 路径：“boxes/:boxId”，组件：BoxesPage }，

标签： nativescript angular2-nativescript

【解决方案1】：

如果您想将一个组件之间的复杂数据（对象）传递给另一个组件，请将该对象字符串化，然后将其传递给其他组件以使用对象解析 JSON。

app.component.ts：

public appListComponent(item: any) {

    const getData: string = item;

    const navigationExtras: NavigationExtras = {
        queryParams: {
            DataList: JSON.stringify(getData)
        }   
    };
    this.routerExtensions.navigate(["app-modal"], navigationExtras);
}

app.modal.component.ts：

 public constructor(public route: ActivatedRoute) {    

      this.route.queryParams.subscribe((params) => {

        this.getParamData = params["DataList"];

        let obj: ModalData = JSON.parse(this.getParamData);
        console.log("Name", obj.name);
        console.log("Description", obj.description);

    });

    }

modaldata.ts：

export class ModalData {
  name: string;
  description: string;  
}

【讨论】：

【解决方案2】：

您可以在此类似帖子中参考我的答案：NativeScript + Angular Navigation context。基本上，您可以通过字符串形式的“路由参数”来执行此操作。不幸的是，您不能传递“整个” JS/TS 对象，但您可以实现一个服务，该服务可以通过提供的字符串参数检索这些对象。有关 roe 的详细信息和代码 sn-ps，请查看我在另一个线程中的回复。

如果是其他线程，这里是一个简短的介绍：

在 Angular + NativeScript 中导航时传递对象与 vanila NativeScript 不同。路由完全通过角度规范实现，这意味着您将需要使用它们的实现。当前 RC5 版本的 Angular 2 使用以下导航（路由）。

【讨论】：