在Angular 6中将HttpParams与Put和Post结合使用将返回类型更改为Observable<HttpEvent<T>>

在Angular 6中，我们可以使用HttpParams与Put和Post方法结合使用，并将返回类型更改为Observable<HttpEvent<T>>。

首先，让我们了解一下Angular 6中的HttpParams。HttpParams是一个不可变的类，用于设置HTTP请求的查询参数。它提供了一种简单的方式来构建URL查询参数，并将其附加到HTTP请求中。

在使用HttpParams时，我们可以通过使用set()方法来设置参数的键和值。例如，我们可以使用以下代码设置一个名为"page"的参数，并将其值设置为1：

let params = new HttpParams().set('page', '1');

接下来，我们可以使用这些参数来执行HTTP请求。在Angular 6中，我们可以使用HttpClient模块来发送HTTP请求。HttpClient模块提供了一组强大的方法来执行各种类型的HTTP请求，包括GET、POST、PUT等。

当我们使用Put和Post方法时，我们可以将返回类型更改为Observable<HttpEvent<T>>。这样做的好处是我们可以获取到HTTP请求的进度信息，并且能够处理上传和下载文件等复杂的操作。

下面是一个示例代码，演示了如何在Angular 6中将HttpParams与Put和Post结合使用，并将返回类型更改为Observable<HttpEvent<T>>：

import { HttpClient, HttpEvent, HttpParams, HttpRequest } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class MyService {
  constructor(private http: HttpClient) {}

  postData(url: string, body: any): Observable<HttpEvent<any>> {
    let params = new HttpParams().set('page', '1');
    let options = {
      params: params,
      reportProgress: true // 开启进度报告
    };

    const req = new HttpRequest('POST', url, body, options);
    return this.http.request(req);
  }

  putData(url: string, body: any): Observable<HttpEvent<any>> {
    let params = new HttpParams().set('page', '1');
    let options = {
      params: params,
      reportProgress: true // 开启进度报告
    };

    const req = new HttpRequest('PUT', url, body, options);
    return this.http.request(req);
  }
}

在上面的代码中，我们创建了一个名为MyService的服务，并在其中定义了两个方法：postData()和putData()。这些方法接受一个URL和一个请求体作为参数，并返回一个Observable<HttpEvent<any>>。

在这些方法中，我们首先创建了一个HttpParams对象，并使用set()方法设置了一个名为"page"的参数。然后，我们创建了一个options对象，并将params属性设置为我们创建的HttpParams对象。我们还将reportProgress属性设置为true，以便开启进度报告。

接下来，我们使用HttpRequest类创建了一个HTTP请求。我们传入了请求的方法（POST或PUT）、URL、请求体和选项。最后，我们使用http.request()方法发送请求，并返回Observable<HttpEvent<any>>。

这样，我们就可以在Angular 6中使用HttpParams与Put和Post结合使用，并将返回类型更改为Observable<HttpEvent<T>>。这样做可以让我们更好地处理HTTP请求的进度和复杂操作。如果你想了解更多关于Angular 6中的HttpClient模块的信息，可以参考腾讯云的相关产品：Angular 6 HttpClient。