在Angular 2中將敏感且長的數據從一個組件傳遞到另一個組件

我有一個頁面，用戶將輸入用戶名和密碼。下面有一個表格，用戶將選擇幾行並在所選行中輸入輸入數據。在Angular 2中將敏感且長的數據從一個組件傳遞到另一個組件

頁面看起來就像這樣：

現在，這裏的下一個按鈕（這是表後）的數據用戶點擊將轉移到新的一頁。我已經創建了onClickAction()方法

爲此，我使用了路線。我創建Routes.forRoot（）和傳遞的數據爲：

imports: [BrowserModule, 
    FormsModule, 
    RouterModule.forRoot([ 
    { path: 'main-page', component: MainPageComponent }, 
    { path: 'exe/:template', component: ExecutionComponent }, 
    ]) 
],

我應該放什麼onClickAction（），以通過用戶名密碼，URL和行哪個用戶已經選擇？

也是正確的傳遞憑據和這樣的大數據在URL？

來源

2017-09-18 Sarvesh

難道你不只是允許用戶在發送到服務器之前在最後一頁輸入密碼？ –

即時通訊不知道，如果它是一個好主意，通過網址傳遞所有敏感數據，你可以做的是你的onClickAction（）填充存儲在共享服務中的模型實例，並使用該共享服務，無論你想訪問的信息 – JayDeeEss

@RoddyoftheFrozenPeas必須在第一頁傳遞數據。 – Sarvesh

如果數據不敏感並且只有很少的參數要傳遞，那麼在路由之間傳遞數據的方便選項是使用查詢參數（數據將以查詢字符串形式傳遞）。

在觸發導航組件功能（即：你onClickAction（））：

let navigationExtras: NavigationExtras = { 
     queryParams: { 
      "couldName": this.cloudName, 
      "jobName": this.jobName 
     } 
    }; 
    this.router.navigate(["page2"], navigationExtras);

在組件，您導航（即：第2頁分量）：

public constructor(private route: ActivatedRoute) { 
    this.route.queryParams.subscribe(params => { 
     this.cloudName= params["couldName"]; 
     this.jobName= params["jobName"]; 
    });

然而，因爲你有敏感的數據，如用戶名和密碼，以及你需要傳遞的數據是複雜的（不是一個或兩個參數），你可以編寫一個可注入你需要的組件的提供程序。

提供者：

import { Injectable } from '@angular/core'; 
@Injectable() 
export class DataProvider { 
    public data: any; 
    public constructor() { } 
}

在第1頁部件：

import { DataProvider } from "../../providers/dataProvider"; 
------- 
------- 
public constructor(private router: Router, private dataProvider: DataProvider) {} 
public onClickAction() { 
     this.dataProvider.data= { 
     "userName": this.userName, 
     "password": this.password, 
     "wsdlUrl":this.url, 
     --------- 
     --------- 
     } 
     this.router.navigate(["page2"]); 
}

在第2頁部件

import { DataProvider } from "../../providers/dataProvider"; 
------- 
------- 
public constructor(private dataProvider: DataProvider) { 
     console.log(this.dataProvider.data.userName); 
}

請參閱this文章瞭解更多詳情。

來源

2018-01-02 10:14:44

在Angular 2中將敏感且長的數據從一個組件傳遞到另一個組件

回答

相關問題