angular - 使用 HttpClient 和 RXJS 将数据发布到 Web API withCredentials : true

Question

我有一个连接到我的 .NET Web API 的 Angular 服务，我正在尝试 POST API 的一些数据。目前我使用的是 HTTP 而不是 HttpClient，而且我没有发送任何数据。但服务已成功连接到 API。

我需要帮助将实际数据从我的 Angular Controller 传递到服务(进而传递到 API)，并在服务中实现 HttpClient。到目前为止，我的 Controller 只是调用我的服务的 myFunction() 函数，没有向它传递任何参数，因此没有数据。我不确定在服务的 RXJS 部分的哪个位置附加我的数据。

注意:无论我如何实现它，由于我的 API 配置，我仍然需要它传递 withCredentials: true

网络 API Controller :

namespace api.controllers
{
    [Authorize]
    public class ValuesController : ApiController
     {
        static List<string> strings = new List<string>()
        {
            "value0", "value1", "value2"
        };

        // GET api/values
        public IEnumerable<string> Get()
        {
            return strings;
        }

        // GET api/values/5
        public string Get(int id)
        {
            return "value";
        }

        // POST api/values
        public void Post([FromBody]string value)
        {
            strings.Add(value);
        }

        // PUT api/values/5
        public void Put(int id, [FromBody]string value)
        {
        }

        // DELETE api/values/5
        public void Delete(int id)
        {
        }

    }
}

Web API web.config 文件(CORS 设置):

<httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="http://localhost:5200" />
    <add name="Access-Control-Allow-Headers" value="*" />
    <add name="Access-Control-Allow-Methods" value="GET,POST,PUT,DELETE,OPTIONS" />
    <add name="Access-Control-Allow-Credentials" value="true" />
  </customHeaders>
</httpProtocol>

我的组件.component.ts:

  myService: MyService;

  constructor(myService: MyService) {
      this.myService = myService;
      this.myService.myFunction();
   }

我的服务.service.ts:

import { Injectable } from '@angular/core';
import { Http, Response, Request, Headers } from '@angular/http';
// import { HttpClient, HttpResponse, HttpRequest, HttpHeaders, HttpInterceptor, HttpHandler, HttpEvent } from '@angular/common/http';

import { Observable } from 'rxjs';
import { from } from 'rxjs';
import { map, filter, catchError, mergeMap } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})

export class MyService {
  http: Http;

  constructor(http: Http) {
    this.http = http;
  };

  public myFunction() {
    let request = new Request({
      method: "POST",
      url: "http://localhost:9090/api/values",
      withCredentials: true
    });

    return this.http.request(request)
      .pipe(map(res => res.json()))
      .subscribe(
        data => console.warn(data),
        err => console.error(err),
        () => console.log("empty")
      );
  }
}

我如何从我的 Controller 向该服务附加一些实际数据？我该如何调整服务以改为使用 HttpClient？我已经尝试将所有 http: Http 引用更改为 HttpClient，完成所有 HttpClient 导入并注释掉 .map/json 部分，但是当我这样做时，我的服务的 return this.http.request(request) 行中的 request 参数下仍然有一条红线.

Answer 1

我使用这个概念希望它也适用于您。

为您的数据创建属性类(将其与您的 .net API 上的类匹配)，这也提供了简单的数据处理型号

export class MyData
{
 username:string;
 password:string;
 isAuthenticated:boolean;
}

服务

import { Http, Response, Request, Headers } from '@angular/http';

export class MyService {     

  constructor(private http: Http) {}

public myFunction(body:MyData) {
 let url = 'http://localhost:9090/api/values'
    return this.http.post(url,body)
      .pipe(map(res => res.json()))          
  }
}

TS

returnValue:any;
myData:MyData;
constructor(private service:MyService){
this.myData = new MyData();
}
myFunction()
{
 this.myData.username = 'anything';
 this.myData.password = 'mypw';
 this.myData.isAuthenticated = true;

 this.returnValue = this.service.myFunction(this.myData)
 .subscribe(res=>{console.log(res)})
}

.NET API

[HttpPost]
public void MYAPI([FromBody]MyData model)
{

    string uname = model.username;
    string pw = model.password;
}