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

Answer 2

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

如果是另一个帖子，这是一个简短的介绍：

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

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

2 个答案: