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

Question

在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中获取我的盒子对象？

值得一提的是我在NativeScript中使用Angular 2。

我已经尝试了所有东西，但不幸的是文档非常差。

提前致谢。

Answer 1

如果要将一个组件之间的复杂数据（Object）传递给其他组件，请将该对象字符串化并将其传递给其他组件以使用object解析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;  
}

Answer 2

你可以在这篇类似的帖子中引用我的答案：NativeScript + Angular Navigation context。基本上你通过作为字符串的“路由参数”来做到这一点。遗憾的是，您无法传递“整个”JS / TS对象，但您可以实现一个可以通过提供的字符串参数检索这些对象的服务。对于roe详细信息和代码片段，请在另一个帖子中检查我的响应。

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

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