在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中将敏感且长的数据从一个组件传递到另一个组件

回答

相关问题