如何在角度服务（角度2）中发送http post请求中的参数答案

【问题标题】：how to send the params in http post request in angular service ( angular 2)如何在角度服务（角度2）中发送http post请求中的参数
【发布时间】：2017-11-09 17:37:21
【问题描述】：

我的要求：

我正在开发一个简单的密码重置功能。它有两个组件验证用户（电子邮件ID和加入日期）和忘记密码（新通行证，确认通行证）。如果是合法用户，系统会携带数据并路由到下一页忘记密码，一旦用户输入新的通行证并确认通行证，点击提交后通行证会被重置。

问题：

我能够在组件之间注入数据，但不确定如何在 forgotpass.service.ts 文件中的 http post 请求中将数据（电子邮件 ID 和日期）作为查询字符串参数传递，该文件将调用我的后端来执行密码重置手术。

非常感谢您对此的任何帮助。

代码 sn-p：

忘记密码.service.ts

import { Injectable } from '@angular/core';
import {Http,Headers,Response,RequestOptions} from '@angular/http';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw'

@Injectable()
export class ForgotpasswordService {

  constructor(private http:Http) { }
  forgotpassword(forgot)

  {
    // public url = http://localhost:90/forgotpassword/
    var headers= new Headers();
    headers.append('content-Type','application/json');
    headers.append('Accept', 'application/json');
    console.log("Connecting to Node js to change password");
    return this.http.post("http://localhost:90/forgotpassword/?email_id=test@gmail.com&date_id=03/30/2007",JSON.stringify(forgot),{headers:headers})
    .map(res => res.json());    
  }

}

忘记密码.component.ts

constructor(private forgotpasswordservice:ForgotpasswordService,private router: Router,public dialog:MdDialog) { }

  ngOnInit() {    
    this.forgot= '/?email_id='+this.email_id_inject+'&date_id='+this.date_id_inject;
  //   console.log(this.forgot);
  //  console.log(this.date_id_inject); 
  //  console.log(this.email_id_inject);

    }

   changepassword() 
    {
      const forgot ={
        pass_word:this.pass_word
      }
      this.forgotpasswordservice.forgotpassword(forgot).subscribe(forgot=> {
        console.log(forgot);

          if (forgot.success) 
          {
            ----success and route to login screen --
          }
          else 
          {
           --- failure error
          }

【问题讨论】：

标签： angular

【解决方案1】：

通常对于 POST 请求，您会在请求正文中发送附加数据。由于您将请求内容类型标头设置为application/json，因此您应该在正文中发送 json。您可以通过将 json 作为第二个参数传递给 http.post 来简单地做到这一点

return this.http.post(
    "http://localhost:90/forgotpassword/?email_id=test@gmail.com&date_id=03/30/2007",
    forgot, // pass json into the body of the request
    {headers:headers}
)
    .map(res => res.json());

如果您确实需要将数据作为查询参数传递，您可以手动将它们添加到您的 url 或使用 URLSearchParams

let params = new URLSearchParams();
params.append('email_id', forgot.email_id);

return this.http.post(
    "http://localhost:90/forgotpassword/?email_id=test@gmail.com&date_id=03/30/2007",
    {},
    {headers:headers, params:params} // add params to options to be appended to url as query params
)

注意：旧的 HTTPModule 使用 UrlSearchParams，使用新的 HTTPClientModule 时，请改用 HttpParams。

【讨论】：