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

时间:2017-09-18 16:36:09

标签: angular angular2-routing

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

页面看起来像这样: enter image description here

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

为此,我使用了路线。我创建了Routes.forRoot()并将数据传递为:

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

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

在url中传递凭据和大数据也是正确的吗?

1 个答案:

答案 0 :(得分:0)

如果数据不敏感且只传递少量参数,在路径之间传递数据的便捷选项是使用查询参数(数据将以查询字符串形式传递)。

在触发导航的组件函数中(即:你的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() { }
}

在第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文章。