Angular 将服务注入基础 class 但不注入子 class 并在子 class 中使用父服务

Question

使用 Angular 7 和 Typescript：我有一个基础 class，它使用大量服务和子 classes（大约 40 个子 class）和我不想在所有 subclass 构造函数中添加这些服务并将它们传递给 super() 但我仍然需要在所有 subclass.

中使用这些服务

export class parentTool {

    constructor(type: string, public service1: Service1, public service2: Service2,public service3: Service3, public service4: Service4){}
}

export class ChildTool1 extends parentTool {

    constructor(public service1: Service1, public service2: Service2,public service3: Service3, public service4: Service4) {

        super("tool1", service1, service2, service3, service4);
    }
}

export class ChildTool2 extends parentTool {

    constructor(public service1: Service1, public service2: Service2,public service3: Service3, public service4: Service4) {

        super("tool2", service1, service2, service3, service4);
    }
}

Answer 1

再添加一项服务并在其中注入所有必需的服务。我们可以简单地在 sub class 中添加该服务，然后将其传递给 super.

中的父级

@injectable()
export class ParentService {
    constructor(type: string, private service1: Service1, private service2: Service2,private service3: Service3, private service4: Service4){}
    executeService1(){
        this.service1.method1();
    }
}

export class parentTool {
    constructor(private parentService: ParentService){}
}

export class ChildTool1 extends parentTool {
    constructor(public parentService: ParentService) {
        super("tool1", parentService);
    }
}

export class ChildTool2 extends parentTool {
    constructor(public parentService: ParentService) {
        super("tool2", parentService);
    }
}

Answer 2

我曾经遇到过同样的问题，所以我最终使用 injector 服务

进行了 manulay DI（依赖注入）

这个静态 class 用于存储注入器服务的引用

export class AppInjector {

  private static injector: Injector;

  static setInjector(injector: Injector) {
    AppInjector.injector = injector;
  }

  static getInjector(): Injector {
    return AppInjector.injector;
  }
}

在应用程序模块中我设置了 injoctor 服务

export class AppModule { 
  constructor(injector:Injector){
      AppInjector.setInjector(injector);// save a injector ref 
  }
}

you need to store the service before you start do any DI (dependency injection)

在基础组件中

export class BaseComponent {
  protected utilitiesService: UtilitiesService; //  service
  protected loggingService: LoggingService; //  service

  constructor() {

      const injector = AppInjector.getInjector();

      this.utilitiesService = injector.get(UtilitiesService); //  DI
      this.loggingService = injector.get(LoggingService); //  DI


  }

}

child class 现在可以访问注入器注入的所有服务 class

    export class ChildComponent extends BaseComponent {
      constructor() {
        super();
      }
    }

demo

Answer 3

您可以使用全局注入器来防止在所有子类中注入所有服务。在您的情况下，它将是这样的：

import {Injector} from '@angular/core';
//other imports
export class parentTool {
  public service1: Service1
  public service2: Service2
  public service3: Service3
  public service4: Service4
      constructor(type: string,injector: Injector){
        this.serviceInject1 = injector.get(Service1);
        this.serviceInject2 = injector.get(Service2);
        this.serviceInject3 = injector.get(Service3);
        this.serviceInject4 = injector.get(Service4);
      }
  }

  export class ChildTool1 extends parentTool {

      constructor(injector: Injector) {  
          super(injector);
          this.service1.someMethodCall()
      }
  }

  export class ChildTool2 extends parentTool {

      constructor(injector: Injector) {  
          super(injector);
          this.service1.someMethodCall()
      }
  }

Angular 将服务注入基础 class 但不注入子 class 并在子 class 中使用父服务

Angular inject service into base class but not in sub-class and use the parent service in sub-classes

typescript

angular

angular7