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

ami*_*ira 5 typescript angular angular7

使用 Angular 7 和 Typescript:我有一个使用大量服务和子类(大约 40 个子类)的基类,我不想在所有子类构造函数中添加这些服务并将它们传递给super()但我仍然需要在所有子类中使用这些服务。


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);
    }
}
Run Code Online (Sandbox Code Playgroud)

mal*_*awi 6

我曾经遇到过同样的问题,所以我最终通过使用injector服务进行 manulay DI(依赖注入)

该静态类用于存储注入器服务的引用

export class AppInjector {

  private static injector: Injector;

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

  static getInjector(): Injector {
    return AppInjector.injector;
  }
}   
Run Code Online (Sandbox Code Playgroud)

在应用程序模块中,我设置了注入器服务

export class AppModule { 
  constructor(injector:Injector){
      AppInjector.setInjector(injector);// save a injector ref 
  }
}
Run Code Online (Sandbox Code Playgroud)

在开始执行任何 DI(依赖注入)之前,您需要存储服务

在基础组件中

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


  }

}
Run Code Online (Sandbox Code Playgroud)

子类现在可以访问注入器类注入的所有服务

    export class ChildComponent extends BaseComponent {
      constructor() {
        super();
      }
    }
Run Code Online (Sandbox Code Playgroud)

演示