Angular 10：扩展组件的自动注入依赖答案

【问题标题】：Angular10: AutoInject Dependancy for extended ComponentAngular 10：扩展组件的自动注入依赖
【发布时间】：2021-01-23 10:44:30
【问题描述】：

自动注入 HttpClient 到扩展类 HttpHelper 而不注入基类 LoginService

我有许多具有 HTTP API 调用的服务。我创建了一个通用的 HTTP 类，它实例化 httpClient 和其他一些服务可以直接使用的辅助变量和函数，而无需重复实例化。

login.service.ts

@Injectable()
export class LoginService extends HttpHelper{

  constructor(private http: HttpClient,
              private authService: AuthService,
              private userManagementService: UserManagementService) {
    super(this.http);
  }

  login(data: IAuthPayload): Observable<any> {
    return this.http.post(this.apiUrl + '/users/login', data, this.getHttpOptions({
      auth: false
    }))
      .pipe(
        map((res: ILoginResponse) => {
          AuthService.setToken(res.data.token);
          this.userManagementService.setUserData(res.data.user);
          this.authService.setAuthState({ is_logged_in: true });
        })
      );
  }

}

http.helper.ts

export class HttpHelper {
  protected apiUrl = '';
  constructor(private http: HttpClient) {
    this.apiUrl = ENVIRONMENT.API_ENDPOINT;
  }

  protected getHttpOptions(options?: CustomHttpHeaderOptions) {
    // function Definition
  }
  
  // Many More members here 
}

LoginService 扩展 HttpHelper 和 httpClient 实例化必须在 HttpHelper 中，而不是在任何服务中。例如LoginService。
如果我们只是扩展HttpHelper而不将httpClient注入LoginService，这是否可能。 httpClient 应该自动注入 httpHelper ，我们将在 LoginService 中使用 httpClient 而不将其注入服务并直接使用 httpHelper httpClient 实例。

【问题讨论】：

标签： angular dependency-injection

【解决方案1】：

您可以使用 Angular Injector 轻松创建可注入类：

import {Injector} from '@angular/core';

/**
 * Allows for retrieving singletons using `AppInjector.get(MyService)` (whereas
 * `ReflectiveInjector.resolveAndCreate(MyService)` would create a new instance
 * of the service).
 */
export let AppInjector: Injector;

/**
 * Helper to set the exported {@link AppInjector}, needed as ES6 modules export
 * immutable bindings (see http://2ality.com/2015/07/es6-module-exports.html) for 
 * which trying to make changes after using `import {AppInjector}` would throw:
 * "TS2539: Cannot assign to 'AppInjector' because it is not a variable".
 */
export function setAppInjector(injector: Injector) {
    if (AppInjector) {
        // Should not happen
        console.error('Programming error: AppInjector was already set');
    }
    else {
        AppInjector = injector;
    }
}

并以这种方式使用它：

import {AppInjector} from './app-injector';
const myService = AppInjector.get(MyService);

见this answer

【讨论】：