Utilizing Dependency Injection with TypeScript and Angular 5 in an Abstract Class

Question

Utilizing Dependency Injection with TypeScript and Angular 5 in an Abstract Class

In my BaseComponent, I have some dependencies injected. The first dependency, EntityService, is essential and correctly implemented.

However, the AnyOtherService is only utilized within the abstract BaseComponent. Instead of injecting it into the ChildComponent where it remains unused, I prefer to have it injected solely into the BaseComponent.

Why must it pass through the ChildComponent before reaching the BaseComponent? A better approach would be to keep it encapsulated within the BaseComponent.

base.component.ts

export abstract class BaseComponent {
  constructor(
    protected entityService: EntityService,
    // protected anyOtherService: AnyOtherService // @todo add this
  ) {
  }
}

child.component.ts

@Component()
export class ChildComponent extends BaseComponent {

  constructor(
    private firstService: FirstService,
    private secondService: SecondService,
    protected anyOtherService: AnyOtherService // @todo remove this
  ) {
    super(
      firstService,
      anyOtherService // @todo remove this
    ); 
  }
}

angular typescript inheritance dependency-injection

Answer 1

Answer №1

To easily pass the Injector to the constructor of a base component, you can do the following (UPDATE):

export abstract class BaseComponent {
  protected anyOtherService: AnyOtherService;

  constructor(
    inject: Injector
    protected entityService: EntityService,
    // protected anyOtherService: AnyOtherService // @todo add this
  ) { 
     this.anyOtherService= inject.get(AnyOtherService);
  }
}


@Component()
export class ChildComponent extends BaseComponent {

  constructor(
    inject: Injector,
    private firstService: FirstService,
    private secondService: SecondService       
  ) {
    super(
     inject,
     firstService
    );       
  }
}

The concept here is to provide the Injector and certain providers in the child component, then pass them to the parent base component without having to include all dependencies of the base class. By passing the injector, child components don't have to inject all dependencies of the parent class and explicitly pass them through the constructor like dep1, dep2, and so on.

Could you elaborate on why it is necessary for properties inside the child component to be defined as private, while those in the parent component are defined as protected?

I believe that the injector should not be declared as a property of either the child or base class. If it were to be declared, an error related to both classes having the same property would arise as mentioned in your comment. This issue arises because both the Base and Child classes cannot have identical properties in their respective scopes. Hence, by not defining an access modifier (private/protected) for the injector in the constructor, we are able to address this limitation and ensure that the Injector is only utilized within the constructor for manual injections required in specific scenarios like this one.

Answer 2

To easily pass the Injector to the constructor of a base component, you can do the following (UPDATE):

export abstract class BaseComponent {
  protected anyOtherService: AnyOtherService;

  constructor(
    inject: Injector
    protected entityService: EntityService,
    // protected anyOtherService: AnyOtherService // @todo add this
  ) { 
     this.anyOtherService= inject.get(AnyOtherService);
  }
}


@Component()
export class ChildComponent extends BaseComponent {

  constructor(
    inject: Injector,
    private firstService: FirstService,
    private secondService: SecondService       
  ) {
    super(
     inject,
     firstService
    );       
  }
}

The concept here is to provide the Injector and certain providers in the child component, then pass them to the parent base component without having to include all dependencies of the base class. By passing the injector, child components don't have to inject all dependencies of the parent class and explicitly pass them through the constructor like dep1, dep2, and so on.

Could you elaborate on why it is necessary for properties inside the child component to be defined as private, while those in the parent component are defined as protected?

I believe that the injector should not be declared as a property of either the child or base class. If it were to be declared, an error related to both classes having the same property would arise as mentioned in your comment. This issue arises because both the Base and Child classes cannot have identical properties in their respective scopes. Hence, by not defining an access modifier (private/protected) for the injector in the constructor, we are able to address this limitation and ensure that the Injector is only utilized within the constructor for manual injections required in specific scenarios like this one.

Answer 3

Answer №2

If you're looking for a way to utilize an injector in Angular, consider exporting it from appModule and using it in your base class like this:

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

//exporting injector 
export let AppInjector: Injector;

export class AppModule {
  constructor(private injector: Injector) {
    AppInjector = this.injector;
  }
}

Then in your base component file (base.component.ts), you can access any service by utilizing the exported injector:

export abstract class BaseComponent {
  private anyOtherService : AnyOtherService ;
  constructor(
    protected entityService: EntityService,
    // protected anyOtherService: AnyOtherService // @todo add this
  ) {
    this.anyOtherService = AppInjector.get(AnyOtherService );
  }
}

Answer 4

If you're looking for a way to utilize an injector in Angular, consider exporting it from appModule and using it in your base class like this:

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

//exporting injector 
export let AppInjector: Injector;

export class AppModule {
  constructor(private injector: Injector) {
    AppInjector = this.injector;
  }
}

Then in your base component file (base.component.ts), you can access any service by utilizing the exported injector:

export abstract class BaseComponent {
  private anyOtherService : AnyOtherService ;
  constructor(
    protected entityService: EntityService,
    // protected anyOtherService: AnyOtherService // @todo add this
  ) {
    this.anyOtherService = AppInjector.get(AnyOtherService );
  }
}

Utilizing Dependency Injection with TypeScript and Angular 5 in an Abstract Class

Answer №1

Answer №2

Similar questions

Can one utilize Javascript/Angular to listen for a 'request sent' event trigger?

Error: The specified property is not found in type 'never' - occurring with the ngFor loop variable

Guide on conducting unit tests for the provided code in Angular 8

Tips for maintaining consistent column size in an angular material table as the screen size shrinks

Unexpected disappearance of form control in reactive form when using a filter pipe

What's the best way to format text as bold in a .ts file so that it appears as [innerText] in the HTML section?

A step-by-step guide on utilizing SCURI to automatically generate unit test cases in Angular 8 and beyond

Bringing a JavaScript function into a TypeScript file results in it being treated as a namespace

Creating an external stylesheet and including it in a component: A beginner's guide

The elusive 'module' cannot be located when working with commonjs

Show data stored in a MongoDB collection as an HTML table by utilizing Angular CLI as the frontend interface

How to dynamically assign a value in a React datepicker component in a React application

Distribute a TypeScript Project on NPM without exposing the source code

Demonstration of basic geometric shapes being generated using Forge Viewer Angular

Evaluating h1 content in HTML using Angular Protactor testing

Transforming the string attribute of an object within a JavaScript array through mapping

Empty spaces are mandatory here

Having difficulty removing new or existing lines on StackBlitz

The AppModule's CanLoad protector

What could be the reason behind my Vue file triggering a TS6504 error and suggesting to "allowJs"?