NativeScript + Angular導航上下文

我試圖在列表之間導航到詳細信息頁面。由於我已經獲取了列表組件中的所有內容，因此我希望將JSON傳遞給詳細信息頁面，以便我已經具備呈現組件所需的所有內容。NativeScript + Angular導航上下文

我試過很多東西

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。

來源

2016-08-14 Andrea Baccega

什麼NG2您使用的版本，這是什麼'app.routes'樣子？ 'app.modules'和這個組件發生了什麼？ –

NativeScript Angular項目在導航到第二頁時只能發送一個參數。我的建議是發送param，你需要做'HTTP'請求並獲得其他數據或者在你的項目中使用全局變量來從這兩個頁面訪問'JSON'。你也可以在這裏查看我的示例項目。 - https://github.com/tsonevn/NGNavClearHistory/tree/navigate_with_params –

在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庫。爲了運行該回購的{N}項目，您將需要free插件或pro。

來源

2016-08-16 19:36:42

這絕對不是對這個問題的回答，因爲它不允許你發送一個完整的對象，但如果你需要發送一些小參數到另一個「頁面」，你可以使用查詢參數來完成。

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']}`) 
}

來源

2017-10-17 13:10:57

NativeScript + Angular導航上下文

回答

相關問題