在 angular 4 服务中从 HTTP get/post 获取查询参数

Question

我正在尝试使用以下 HTML 表单发送表单数据 :-

<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>

<form action="https://test-pubg.sohum.com:4200/securelogin" target="_blank" method="get">
  Access: <input type="text" id="accessToken" name="accessToken"><br>
  Refresh: <input type="text" id="refreshToken" name="refreshToken"><br>
  <button type="submit">Submit</button><br>
</form>

现在每次我单击提交按钮时，都会打开另一个选项卡（这是预期的）URL :- https://test-pubg.sohum.comt:4200/securelogin?accessToken=test&refreshToken=test

问题是浏览器控制台空白

现在，如果我将 URL 更改为以下内容（请注意 URL 中添加的 #）并按 F5 刷新 url :-

https://test-pubg.sohum.com:4200/#/securelogin?accessToken=test&refreshToken=test

我正在浏览器控制台上获取预期数据，如下所示：-

Angular is running in the development mode. Call enableProdMode() to enable the production mode.
constructor called
test
test

即使表单的操作方法是 post

，也会发生这种情况

现在开始行动 URL 我有一个 angular 4 服务运行其构造函数如下 :-

constructor(private route: ActivatedRoute,private router: Router,
private secureloginService: SecureloginService,private http: HttpClient) {
  console.log("constructor called");
  this.accessToken = this.route.snapshot
  .queryParams['accessToken'];
  console.log(this.accessToken);
  this.refreshToken = this.route.snapshot
  .queryParams['refreshToken'];
  console.log( this.refreshToken);

  this.route.queryParamMap.subscribe(params => {
    console.log(params);
  });


 }

我无法在点击提交按钮时发送数据。另请注意，我已经为我的应用程序启用了 HTTPS。作为参考，我 posting 我的 angular 路由详细信息如下 :-

proxy.conf.js

{
"/" : "http://test-pubg.sohum.com:8080",
"secure": false}

componenet-routing.moudle.ts

const routes: Routes = [
  {path: '', component: SecureloginReceiverComponent},
  {path: 'securelogin/', component: SecureloginReceiverComponent,pathMatch: 'full' }
];
export const SecureloginRoutingModule = RouterModule.forChild(routes);

package.json:-

"start": "ng serve --disable-host-check --ssl 1 --proxy-config proxy.conf.json",

此行为的可能原因是什么。我已经关注了 Whosebug 和 github 上可用的相关线程。对于某种帮助，我将不胜感激。

Answer 1

首先，您应该使用 Angular Forms，而不是 HTML <form action 属性，这会干扰 Angular 的 SPA 设计。

我认为你的代理-conf.json也无效

你应该试试

{
  "/**": {
    "target": "http://test-pubg.sohum.com:8080", //back-end adress:port
    "secure": false,
    "changeOrigin": true
  }
}

然后，在 SecureloginReceiverComponent 中，您应该调用 SecureloginService 的方法来 post 表单的输入数据（通过方法属性发送）。

无需刷新页面，也无需将输入数据放入URL。

Answer 2

所以真正的问题是 URL 中的 HTTP 状态和参数不可用。 ActivatedRoute 将能够读取 URL 中传递的任何内容，即当调用 angular 页面时，查询参数应该在 URL 中可见，然后只有 ActivatedRoute 能够读取数据。其次，我正在制作一个服务器间，即从一台服务器到另一台服务器，所以即使在 URL 被调用时也是 :-

https://test-pubg.sohum.com:4200/#/securelogin?accessToken=abc&refreshToken=cccc

但在重定向后它被更改为以下内容:-

https://test-pubg.sohum.com:4200/#/securelogin

省略查询参数，使它们在 URL 中不可用。因此 ActivatedRoute 无法读取。因此，作为我发现的解决方案，必须在重定向到 OK 之前明确设置 HTTP 状态。按照示例代码：-

ModelAndView view = new ModelAndView("redirect:" + appUrl);
view.addObject("usr", userName); 
view.setStatus(HttpStatus.OK);

另一个非常重要的注意事项是，这个概念只有在您发出 HTTP GET 请求时才有效。

在 angular 4 服务中从 HTTP get/post 获取查询参数

Fetching query parameters from HTTP get/post in angular 4 service

angular

angular4-forms

angular4-router

angular-activatedroute