如何在Angular 13中基于不同的环境（本地和qa）注入服务（本地和api）？

Question

api-local.service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { LoginRequest } from '../login/login-request';

@Injectable({
  providedIn: 'root'
})

export class ApiLocalService {

  constructor(private httpClient: HttpClient) { }
  
  private headers = new HttpHeaders({
    'Content-Type': 'application/json; charset=utf-8',
    'Accept': 'application/json, text/plain'
  });

  userLoginLocal(){
    console.log("inside LOCAL API service");
    return this.httpClient.get('../assets/data/login.json', {headers:this.headers});
  }

  getUserListLocal(){
    return this.httpClient.get('../assets/data/userList.json' , { headers: this.headers })
  }
}

api.service.ts

import { Inject, Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { LoginRequest } from '../login/login-request';
import { EnvironmentConfig, ENV_CONFIG } from './environment-config.interface';

@Injectable({
  providedIn: 'root'
})

export class ApiService {

    public apiUrl: string;

  constructor(@Inject(ENV_CONFIG) config: EnvironmentConfig,private httpClient: HttpClient,) {
    this.apiUrl = `${config.environment.baseUrl}`;
   }
  
  private headers = new HttpHeaders({
    'Content-Type': 'application/json; charset=utf-8',
    'Accept': 'application/json, text/plain'
  });

  userLoginLocal(){
    console.log("inside LOCAL API service");
    return this.httpClient.get('../assets/data/login.json', {headers:this.headers});
  }

  getUserListLocal(){
    return this.httpClient.get('../assets/data/userList.json' , { headers: this.headers })
  }
}

auth-service.ts

import { EventEmitter, Injectable, Output } from '@angular/core';
import { Observable, throwError } from 'rxjs';
import { HttpClient } from '@angular/common/http';

import { LoginRequest } from '../login/login-request';
import { LoginResponse } from '../login/login-response';
import { LocalStorageService } from 'ngx-webstorage';
import { map, tap ,catchError} from 'rxjs/operators';
import { environment } from 'src/environments/environment';

import { ApiLocalService } from './api-local.service';


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

  private API_URL = environment.API_URL;
  // private Local_Env = environment.Local_Env;
  private roles: Array<string> = [];

   
  @Output() loggedIn: EventEmitter<boolean> = new EventEmitter();
  @Output() username: EventEmitter<string> = new EventEmitter();
  @Output() admin: EventEmitter<boolean> = new EventEmitter();
  @Output() superAdmin: EventEmitter<boolean> = new EventEmitter();
  @Output() client: EventEmitter<boolean> = new EventEmitter();

  refreshTokenPayload = {
    refreshToken: this.getRefreshToken(),
    username: this.getUserName()
  }
  constructor(private httpClient: HttpClient,private localStorage: LocalStorageService, 
              private apiLocalService:ApiLocalService) { 
}
    
 
adminLogin(loginRequest: LoginRequest): Observable<boolean> {
  console.log("loginrequest:"+loginRequest);
  return this.httpClient.post<any>(this.API_URL+'/auth-service/login', loginRequest)
    .pipe(map(data => {
      console.log(data)
      if(data.roles.find((role: string) => role !='ROLE_SUPER_ADMIN' && role !='ROLE_ADMIN' && role !='ROLE_CLIENT')){
        return false;
      }else{
      this.localStorage.store('authenticationToken', data.authenticationToken);
    this.localStorage.store('username', data.username);
    this.localStorage.store('refreshToken', data.refreshToken);
    this.localStorage.store('expiresAt', data.expiresAt);
    this.localStorage.store('roles', JSON.stringify(data.roles));
    this.loggedIn.emit(true);
    this.username.emit(data.username);
    if(data.roles.find((role: string) => role =='ROLE_ADMIN')){
      this.admin.emit(true);
    }
    if(data.roles.find((role: string) => role =='ROLE_SUPER_ADMIN')){
       this.superAdmin.emit(true);
    }
    if(data.roles.find((role: string) => role =='ROLE_CLIENT')){
      this.client.emit(true);
   }
    
    return true;
      }
    }));
  
}

Auth-service 具有在“登录”组件中调用的 adminLogin。 我的要求是在 env=local 时调用 api-local.service.ts，否则在 env=qa 时调用 api.service.ts。 des 服务应该被注入到 adminLogin() 里面的 auth-service.ts 中。 快速帮助将不胜感激...

Answer 1

一个简单的解决方案可能是：

1. 创建一个接口，定义您的 2 个服务的方法：

export interface IApiService {

   userLoginLocal(): Observable<Add type here>;

   getUserListLocal(): Observable<Add type here>;

}

1. 让你的服务实现这个接口

...
export class ApiService implements IApiService {
   ....
}

export class ApiLocalService implements IApiService {
  ...
}

1. 将这两个服务注入到您的 AuthService 中：

export class AuthService {

    private apiService: IApiService;

    constructor(apiService: ApiService, apiLocalService: ApiLocalService) {
        if (environment.localEnv) {
           this.apiService = apiLocalService;
        } else {
           this.apiService = apiService;
        }
        // from here you can use this.apiService ....
    }
}