Angular RequestOption不在角度模式下工作。有什么替代方案

我是个新手。我正试图在我的代码中使用RequestOptions，我知道它已被弃用，我们还有其他类似的问题，但对该问题的回答在我的案例中不起作用。那么能帮我一些吗？下面是我的代码，其中包含RequestOption，但该选项不起作用

import { Injectable } from '@angular/core';
import { Http, Headers, RequestOptions } from '@angular/http';

@Injectable()
export class AppHttpService {

  constructor(private http: Http) { }

  getHeaders() {
    const headers = new Headers();
    headers.append('Content-Type', 'application/json');
    // TODO: add token

    return headers;
  }

  getRequestOptions(): RequestOptions {
    const options = new RequestOptions();
    options.headers = this.getHeaders();

    return options;
  }

  get(url: string) {
    return this.http.get(url, this.getRequestOptions());
  }

  post(url: string, data: any) {
    return this.http.post(url, data, this.getRequestOptions());
  }

}

这就是我得到的错误

Error: src/app/services/app-http.service.ts:2:47 - error TS2307: Cannot find module '@angular/http' or its corresponding type declara
tions.

2 import { Http, Headers, RequestOptions } from '@angular/http';
                                                ~~~~~~~~~~~~~~~

实现我想要做的事情的替代代码是什么

这些是我的配置

Angular CLI: 11.2.11
Node: 14.3.0
OS: darwin x64

Angular: 11.2.12


Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1102.11
@angular-devkit/build-angular   0.1102.11
@angular-devkit/core            11.2.11
@angular-devkit/schematics      11.2.11
@angular/animation              4.0.0-beta.8
@angular/cdk                    11.2.11
@angular/cli                    11.2.11
@angular/material               11.2.11
@schematics/angular             11.2.11
@schematics/update              0.1102.11
rxjs                            6.6.7
typescript                      4.1.5

---

谢谢你

正如你已经说过的，你的方式不受欢迎，所以我建议你使用Angular HttpClient。就我现在所知，模块

@angular/http

已经不存在了。如果我正确理解您的问题，您希望将这些头添加到每个请求中。我给你们举了一个HttpClientModule和HttpInterceptor的例子。这是一种常见且简单的方法：

在您的

app.module.ts

import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';

为http请求创建服务

使用CLI生成新服务并声明用于获取数据和发送请求的方法。我还建议不要使用URL作为参数，而是为每个请求使用一个方法，例如：

在提供者数组中的

app.module.ts

中声明拦截器

---

请提供你的错误，对不起，我忘了放那个。我现在已经更新了。

// Import HttpClient
import { HttpClient } from '@angular/common/http';

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

    // Declare baseURL
    private baseURL = 'http://localhost:3000';

    // Inject HttpClient in the constructor
    constructor(private http: HttpClient) { }

    // exmaple GET-request
    getMyContacts(userID: number): Observable<Contact[]> {
        return this.http.get<Contact[]>(`${this.baseURL}/contatcs/${userID}`);
    }

    // example POST-request
    newContact(email: string): Observable<any> {
        return this.http.post<any>(`${this.baseURL}/contacs/create`, {
            'email': email
        });
    }

}

import { catchError } from 'rxjs/operators';
import { TokenStorageService } from './../_service/_data/token-storage.service';
import {
  HttpEvent,
  HttpHandler,
  HttpInterceptor,
  HttpRequest,
  HttpErrorResponse,
} from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable, throwError } from 'rxjs';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  constructor(
    private tokenStorage: TokenStorageService
  ) {}

  intercept(
    req: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    const request = this.addAuthHeader(req);

    return next
      .handle(request)
      .pipe(
        catchError(error => {
          return throwError(error);
        });
      );
  }

  addAuthHeader(req: HttpRequest<any>): HttpRequest<any> {
    return req.clone({
      setHeaders: {
        Authorization: `Bearer ${this.tokenStorage.getToken()}`,
      }
    });
  }

providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthInterceptor,
      multi: true,
    }
  ]