Angular 5中如何通过查询字符串向HttpClient.post传递参数？

看起来你遇到的400错误大概率是请求参数没正确传递，或者请求体格式不符合后端预期，结合你的代码，我整理了两个关键修复点：

1. 修正组件中参数传递的错误 #

在你的login.component.ts里，logMeIn函数明明接收了contactNo参数，但调用searchPerson时却用了this.contactNo——如果组件实例的contactNo没提前赋值，这会导致传给服务的参数是undefined，后端自然会返回400错误。

修正后的组件代码：

import { Component, OnInit } from '@angular/core';
import {FactoryService} from '../../services/factory.service';

@Component({
  // 你的组件元数据
})
export class LoginComponent implements OnInit {
  loading = false;
  // 如果是从模板绑定获取contactNo，确保变量已声明
  contactNo?: string;

  constructor(private factory: FactoryService) { }

  ngOnInit(): void { }

  logMeIn(contactNo:string){
    this.loading = true;
    // 直接传递函数参数contactNo，而非this.contactNo
    this.factory.searchPerson(contactNo).subscribe( 
      data => { 
        console.log(data.token);
      }, 
      err => { 
        this.loading = false;
        console.log(err.message);
      }, 
      () => {
        this.loading = false;
        console.log('Login process done');
      } 
    ); 
  }
}

2. 确保请求体格式符合x-www-form-urlencoded要求 #

虽然Angular的HttpParams是用来处理URL参数的，但作为POST请求体传递时，需要明确将其转换为URL编码的字符串（部分Angular版本不会自动完成这个转换）。

修正后的服务代码：

import { Injectable } from '@angular/core'; 
import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http'; 
import {Observable} from 'rxjs/Observable';

@Injectable({
  providedIn: 'root'
})
export class FactoryService {

  constructor(private http: HttpClient) { }

  searchPerson(contactNo: string): Observable<any> { 
    // 更简洁的Headers创建方式
    const headers = new HttpHeaders()
      .set('Content-Type', 'application/x-www-form-urlencoded'); 

    // 用fromObject快速构建参数集合
    const params = new HttpParams({
      fromObject: {
        grant_type: 'password',
        username: contactNo
      }
    }); 

    // 将params转换为字符串作为请求体
    return this.http.post('Some Url', params.toString(), { headers }); 
  }
}

额外检查点 #

• 确认'Some Url'是正确的后端接口地址，没有拼写错误
• 检查后端是否确实要求grant_type和username作为表单参数传递（而非URL查询参数）
• 如果后端还需要其他必填参数（比如password），记得补充到HttpParams中

内容的提问来源于stack exchange，提问作者Techno