在Angular 2中将敏感和长数据从一个组件传递到另一个组件

Question

我有一个页面，用户将输入用户名，密码。下面是用户将选择几行并在所选行中输入输入数据的表。

页面看起来像这样：

现在，用户点击下一个按钮（在表格之后），数据将转移到新页面。我创建了onClickAction()方法

为此，我使用了路线。我创建了Routes.forRoot（）并将数据传递为：

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

我应该在onClickAction（）中放置什么才能传递用户名密码url和用户选择的行？

在URL中传递凭据和大数据也是正确的吗？

Answer 1

如果数据不敏感并且只传递少量参数，则在路由之间传递数据的便捷选项是使用查询参数（数据将以查询字符串形式传递）。

在触发导航的组件函数中（即：你的onClickAction（））：

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

在您导航的组件中（即：page2组件）：

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() { }
}

在page1组件中：

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"]);
}

在page2组件中

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

有关更多详细信息，请参阅this文章。