Injecting a service into a base class in Angular, but not in the sub-class, then utilizing the parent service in the sub-

Question

Injecting a service into a base class in Angular, but not in the sub-class, then utilizing the parent service in the sub-

When working with Angular 7 and Typescript, I have a base class that relies on multiple services and has around 40 subclasses. Instead of adding these services to each subclass constructor and passing them to super(), I am looking for a more efficient way to use the services in all subclasses.

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);
    }
}

angular typescript angular7

Answer 1

Answer №1

When facing a similar issue, I opted for manual Dependency Injection (DI) by leveraging the injector service.

This static class was utilized to retain a reference of the injector service.

export class AppInjector {

  private static injector: Injector;

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

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

In the app module, I configured the injector service.

export class AppModule { 
  constructor(injector: Injector){
      AppInjector.setInjector(injector); // saving an injector reference 💾
  }
}

It is essential to store the service before initiating any DI operations (Dependency Injection).

Within the base component:

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
  }

}

The child class can now access all services injected by the injector class 🎉🎉

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

Check out the demo 🔥🔥

Answer 2

When facing a similar issue, I opted for manual Dependency Injection (DI) by leveraging the injector service.

This static class was utilized to retain a reference of the injector service.

export class AppInjector {

  private static injector: Injector;

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

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

In the app module, I configured the injector service.

export class AppModule { 
  constructor(injector: Injector){
      AppInjector.setInjector(injector); // saving an injector reference 💾
  }
}

It is essential to store the service before initiating any DI operations (Dependency Injection).

Within the base component:

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
  }

}

The child class can now access all services injected by the injector class 🎉🎉

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

Check out the demo 🔥🔥

Answer 3

Answer №2

To enhance functionality, integrate an additional service and inject all necessary services accordingly. This can be achieved by including the new service in a subclass and passing it to the parent class using 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 4

To enhance functionality, integrate an additional service and inject all necessary services accordingly. This can be achieved by including the new service in a subclass and passing it to the parent class using 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 5

Answer №3

To prevent injecting all services in all child classes, you can utilize a global injector. For your specific scenario, the implementation would resemble the following:

import {Injector} from '@angular/core';
//other imports
export class mainTool {
  public serviceA: ServiceA
  public serviceB: ServiceB
  public serviceC: ServiceC
  public serviceD: ServiceD
      constructor(type: string, injector: Injector){
        this.serviceInjectA = injector.get(ServiceA);
        this.serviceInjectB = injector.get(ServiceB);
        this.serviceInjectC = injector.get(ServiceC);
        this.serviceInjectD = injector.get(ServiceD);
      }
  }

  export class ChildToolX extends mainTool {

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

  export class ChildToolY extends mainTool {

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

Answer 6

To prevent injecting all services in all child classes, you can utilize a global injector. For your specific scenario, the implementation would resemble the following:

import {Injector} from '@angular/core';
//other imports
export class mainTool {
  public serviceA: ServiceA
  public serviceB: ServiceB
  public serviceC: ServiceC
  public serviceD: ServiceD
      constructor(type: string, injector: Injector){
        this.serviceInjectA = injector.get(ServiceA);
        this.serviceInjectB = injector.get(ServiceB);
        this.serviceInjectC = injector.get(ServiceC);
        this.serviceInjectD = injector.get(ServiceD);
      }
  }

  export class ChildToolX extends mainTool {

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

  export class ChildToolY extends mainTool {

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

Injecting a service into a base class in Angular, but not in the sub-class, then utilizing the parent service in the sub-

Answer №1

Answer №2

Answer №3

Similar questions

Angular 6: Sending Back HTTP Headers

Angular 7's masonry overlay technique

"What could be causing my React Native app to build without any issues even though the TypeScript compiler is throwing

Changing the type of value in a React select onChange

Retrieving selected item values in Angular 2 using ng2-completer

Limiting the scope of TypeScript types to specific keys, such as Exact/DeepExact

Creating a Jasmine test for the event.target.click can be accomplished by defining a spec that

Guide on achieving horizontal scrolling in Ionic 3

Is there a method in Angular2+ to inherit constants from one and extend it into another constant?

The implementation of combineSlices in reduxjs/[email protected] is an essential feature for managing

How can you refer to the implementing class from an interface in TypeScript?

The error message "Property does not exist on type Object from subscribe" indicates that

What is the method for obtaining the union type of interface values (including string enums)?

Angular 12 update appears to be causing an issue where CanActivate is not being triggered

Concealing a component when the page first loads

The error message "Directive does not contain a property called 'element'.ts" is displayed

Sending information to a RESTapi using Angular 6

Saving JSON format in VueX State Management

Issue with Stenciljs custom event not triggering using @Listen decorator

Is binding necessary for passing a string to an Angular component?