从 Angular 4 服务中的 HTTP get/post 获取查询参数答案

【问题标题】：Fetching query parameters from HTTP get/post in angular 4 service从 Angular 4 服务中的 HTTP get/post 获取查询参数
【发布时间】：2019-01-23 07:42:56
【问题描述】：

我正在尝试使用以下 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 正在开发模式下运行。调用 enableProdMode() 到启用生产模式。
名为 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。作为参考，我将我的角度路由详细信息发布如下：-

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",

这种行为的可能原因是什么。我已经关注了 stackoverflow 和 github 上的相关线程。寻求帮助，我将不胜感激。

【问题讨论】：

标签： angular angular4-forms angular4-router angular-activatedroute

【解决方案1】：

所以真正的问题是 HTTP 状态和 URL 中的参数不可用。 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 请求时才有效。

【讨论】：

【解决方案2】：

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

我认为您的 proxy-conf.json 也无效

你应该试试

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

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

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

【讨论】：

我认为普通的 HTML 表单不能使用 post 发送数据。我使用 HTML 表单还是 Angular 表单来发送数据有什么关系。 Angular 旨在为跨平台的 HTTP 协议工作。其次，我已经尝试过您建议的代理设置方式，没有任何区别。虽然我的工作以某种方式。感谢您抽出时间。如果万一你发现了什么。请告诉我
Vanilla HTML 表单会重新加载整个应用程序，这违反了 Angular 的 SPA 设计，对用户体验非常不利。无论如何，我看不到任何发送带有数据的 XHR 请求的代码。你的应用架构是什么？