Question

我正在尝试在列表和详细信息页面之间导航。因为我已经在列表组件中提取了所有内容，所以我想将JSON传递给详细信息页面，以便我已经完成了渲染组件所需的一切。

我尝试了很多东西

this._router.navigate(['details', JSON.stringify(item)]) // seems to truncate the JSON
this._router.navigate(['details', item]) // raises an  Cannot match any routes

然后我尝试从路由定义中删除:item url参数并试图使用允许的queryParams参数，但我无法在DetailsPage中读取它。

Answer 1

这绝对不是这个问题的答案，因为它不允许你发送一个完整的对象，但是如果你只需要将一些小参数发送到另一个＆＃34; page＆＃34;，你可以完成这个使用查询参数。

this.routerExtensions.navigate(["/chats"], {
    replaceUrl: false,
    queryParams: {
        name: 'Some Name',
        id: 'some-id'
    }
});

您可以在其他页面上访问它们：

import { ActivatedRoute } from "@angular/router";
[...]

constructor(private route: ActivatedRoute) {}

[...]
if (this.route.snapshot.queryParams) {
    const query = this.route.snapshot.queryParams

    console.log(`name: ${query['name']}`)
    console.log(`id: ${query['id']}`)
}

Answer 2

在Angular + NativeScript中导航时传递对象与vanila NativeScript不同。路由完全通过角度规范实现，这意味着您将需要使用它们的实现。 Angular 2的当前RC5版本使用以下导航（路由）。您需要创建一个包含所有可能的应用路由的RouterConfig，例如：

const ROUTES: RouterConfig = [
    { path: "", redirectTo: "/home-page", terminal: true },
    { path: "home=page", component: HomePageComponent },
    { path: "second-page", component: SecondPageComponent }
];

您还可以使用参数化路径并传递一些简单的字符串参数，想象一下网站页面中的URI。通过执行此操作，您可以通过某种“残缺”字符串来帮助您通过您导航到的页面检索所需信息。在第二页中，您可以订阅到ActivatedRoute并检索这些参数。这是一个例子：

路线：

import { RouterConfig } from '@angular/router';

const ROUTES: RouterConfig = [
    { path: "", redirectTo: "/home-page", terminal: true },
    { path: "home=page", component: HomePageComponent },
    { path: "second-page/:firstArg/:secondArg", component: SecondPageComponent }
];

和SecondPageComponent：

import { Component, OnInit } from "@angular/core";
import { ActivatedRoute, Router } from '@angular/router';

@Component({
    moduleId: module.id,
    selector: "second-page",
    templateUrl: "second-page.component.html",
    styleUrls: ["second-page.component.css"]
})
export class SecondPageComponent implements OnInit {
    constructor(private _router: Router, private _route: ActivatedRoute) {

    }

    ngOnInit() {
        this._sub = this._route.params.subscribe(params => {
            var parentTitle = params['parentTitle'];
            var tappedTitle = params['tappedTitle'];
            this.hasBack = false;
            this._currentExample = this._exampleItemsService.getParentExampleItem(0);
        });
    }

您可以查看展示此类导航和有趣示例的nativescript-ui-samples-angular github回购。要运行该repo的{N}项目，您需要free插件或pro插件。

NativeScript + Angular Navigation上下文

2 个答案: