Angular 5中的RequestOptions不推荐使用符号错误答案

【问题标题】：RequestOptions deprecated symbol error in Angular 5Angular 5中的RequestOptions不推荐使用符号错误
【发布时间】：2022-05-24 13:49:08
【问题描述】：

我正在尝试使 Angular 4 中的代码适应 Angular 5。我做了很多更改，但我有一个关于 RequestOptions 的错误。该代码是关于身份验证的，这就是我遇到错误的地方：

import { Injectable } from '@angular/core';
import { RequestOptions } from '@angular/http';
import { User } from '../model/model.user';
import 'rxjs/add/operator/map';
import { HttpClient, HttpHeaders } from '@angular/common/http';

@Injectable()
export class AuthService {
    constructor(public http: HttpClient) { }

    public logIn(user: User) {

        const headers = new HttpHeaders();
        headers.append('Accept', 'application/json')
        // creating base64 encoded String from user name and password
        const base64Credential: string = btoa(user.username + ':' + user.password);
        headers.append('Authorization', 'Basic ' + base64Credential);
        // this is where i'm having a problem : 
        const httpOptions = new RequestOptions();
        httpOptions.headers = headers;

        return this.http.get('http://localhost:8081/' + '/account/login',
            httpOptions)
            .map(resp => {
                // login successful if there's a jwt token in the response
                const user = resp.json().principal; // the returned user object is a principal object
                if (user) {
                    // store user details  in local storage to keep user logged in between page refreshes
                    localStorage.setItem('currentUser', JSON.stringify(user));
                }
            });
    }


    logOut() {
        // remove user from local storage to log user out
        return this.http.post('http://localhost:8081/' + 'logout', {})
            .map(resp => {
                localStorage.removeItem('currentUser');
            });

    }
}

错误：使用了不推荐使用的符号请帮我更改 Angular 5 中的代码 (RequestOptions)

【问题讨论】：

使用 const httpOptions = new RequestOptions({headers: headers});而是

标签： angular5

【解决方案1】：

您不应使用已弃用模块 @angular/http 中的 RequestOptions。

如API documentation 中所示，options 现在属于以下类型：

{
    headers?: HttpHeaders | {
        [header: string]: string | string[];
    };
    observe?: HttpObserve;
    params?: HttpParams | {
        [param: string]: string | string[];
    };
    reportProgress?: boolean;
    responseType?: 'arraybuffer' | 'blob' | 'json' | 'text';
    withCredentials?: boolean;
}

因此你应该这样写：

const headers = new HttpHeaders();
headers.append('Accept', 'application/json')
const base64Credential: string = btoa( user.username + ':' + user.password);
headers.append('Authorization', 'Basic ' + base64Credential);

this.http.get('http://localhost:8081/' + '/account/login', {
  headers: headers
});

或者：

this.http.get('http://localhost:8081/' + '/account/login', {
  headers: {
    'Accept': 'application/json',
    'Authorization': 'Basic ' + btoa(user.username + ':' + user.password)
  }
});

【讨论】：