如何在角度服务的http post请求中发送params(angular 2)

时间:2017-11-09 17:37:22

标签: angular

我的要求:

我正在开发一个简单的密码重置功能。它有两个组件验证用户(电子邮件ID和加入日期)和忘记密码(新密码,确认通过)。如果是有效用户,那么系统应该携带数据并路由到下一页忘记密码,一旦用户输入新密码并确认通过,点击提交时该通行证应该重置。

问题:

我能够在组件之间注入数据,但不知道如何将数据(电子邮件ID和日期)作为查询字符串参数传递给forgetpass.service.ts文件中的http post请求,该文件将调用我的后端执行密码重置操作。

非常感谢任何帮助。

代码段:

忘记密码.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());    
  }

}

Forgotpass.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
          }

1 个答案:

答案 0 :(得分:0)

通常,对于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());

如果您确实需要将数据作为查询参数传递,您可以手动将它们添加到您的网址或使用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
)

注意:UrlSearchParams用于旧的HTTPModule,在使用新的HTTPClientModule时,请使用HttpParams。