3

在 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。

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

提前致谢。

4

2 回答 2

6

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

    });

    }

模态数据.ts：

export class ModalData {
  name: string;
  description: string;  
}
于 2018-09-10T11:18:39.177 回答
0

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

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

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

于 2016-08-21T19:24:48.307 回答