路由器导航角8隐藏URL参数

Question

由于我已经创建了一个调用来编辑页面的方法，代码如下所示。

SelectStaff(_StaffEmit:any){    
let StaffJson = JSON.stringify(_StaffEmit);
  let _navigationExtras: NavigationExtras = {
    queryParams: {
        StaffJson
      }
    };
    this._router.navigate(["StaffInfo"], _navigationExtras);
  }

现在，此代码重定向到成功完成的StaffInfo.ts页面。下面是我接收JSON数据的代码。

this._routeEdit.queryParams.subscribe(params => {
  let StaffParsed = JSON.parse(params.StaffJson);
  this.StaffModel.Id = StaffParsed.id;
  this.StaffModel.FirstName = StaffParsed.firstName;
  this.StaffModel.LastName = StaffParsed.lastName;
  this.StaffModel.UserName = StaffParsed.username;
  this.StaffModel.Email = StaffParsed.email;
  this.StaffModel.Title = StaffParsed.title;
  this.StaffModel.CellPhoneNo = StaffParsed.cellPhoneNo;
  });

现在，我遇到了一个问题，因为我称之为JSON数据，它附加在URL上，我不想这样做。下面是它的图片。

​

正如我所看到的，它使用GET谓词，但我不想显示数据，最好使用任何POST谓词或非POST谓词方法来重定向数据。

Answer 1

唯一的方法是使用skipLocationChange属性来保护用户不会看到URL更改。

Answer 2

您可以在Base64中对其进行编码，放入查询参数，并在需要时再对其进行解码。

//encode to base64
btoa(JSON.stringify({username:"admin",firstname:"John",lastname:"Doe"}))
//eyJ1c2VybmFtZSI6ImFkbWluIiwiZmlyc3RuYW1lIjoiSm9obiIsImxhc3RuYW1lIjoiRG9lIn0

现在将这个字符串放到URL中，当您需要它时，只需对它进行解码。

//decode to base64
JSON.parse(atob("eyJ1c2VybmFtZSI6ImFkbWluIiwiZmlyc3RuYW1lIjoiSm9obiIsImxhc3RuYW1lIjoiRG9lIn0"))
//"{"username":"admin","firstname":"John","lastname":"Doe"}"

Answer 3

• 角7.2.0及以上。您可以在constructor.

对象中传递状态。

• 可以在url中传递状态而不反映状态。

• 您可以访问e 113状态e 214中的数据，这是通过路由组件中的路由器传递的，并且可以在中访问。

let StaffJson = JSON.stringify(_StaffEmit);
  let _navigationExtras: NavigationExtras = {
    state: {
        StaffJson
      }
    };
    this._router.navigate(["StaffInfo"], _navigationExtras);
  }

XYZ组件，其中router.navigate(‘./XYZ’，_navigationExtras)

constructor(private router: Router) {
    this.name = this.router.getCurrentNavigation().extras.state;

    let StaffParsed = JSON.parse(params.StaffJson);
       this.StaffModel.Id = StaffParsed.id;
       this.StaffModel.FirstName = StaffParsed.firstName;
       this.StaffModel.LastName = StaffParsed.lastName;
       this.StaffModel.UserName = StaffParsed.username;
       this.StaffModel.Email = StaffParsed.email;
       this.StaffModel.Title = StaffParsed.title;
       this.StaffModel.CellPhoneNo = StaffParsed.cellPhoneNo;
}