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

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

值得一提的是，我将 Angular2 与 NativScript 一起使用。

我已经尝试了一切，但不幸的是文档非常糟糕。

提前致谢。

Answer 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;  
}