Incorporate a service into a base class in Angular2 to ensure its functionality extends to all derived classes

Question

Incorporate a service into a base class in Angular2 to ensure its functionality extends to all derived classes

I have multiple classes with a hierarchical inheritance structure as follows:

class A (an abstract class)
class B extends A
class C extends B

I am looking to incorporate a service into class A to enable a function that utilizes notifications. How can I achieve this without directly adding the service to the subclasses?

My approach is somewhat similar to the example below, but I aim to find a way to avoid importing the service in the subclasses:

export class abstract A {
  constructor(protected service: NewService) {}
}

export class B extends A {
  constructor(protected service: NewService) {
    super();
  }
}

export class C extends B {
  constructor(protected service: NewService) {
    super();
  }
}

angular typescript oop dependency-injection

Answer 1

Answer №1

In my opinion, the most effective way to achieve this is by incorporating an Injector into an abstract class. This allows for the injection of multiple services. Subsequently, the injector should be passed into the super() method in each descendant class.

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

export abstract class Base {
  private serviceA: ServiceA;
  private serviceB: ServiceB;

  constructor(
    injector: Injector
  ) {
    this.serviceA = injector.get(ServiceA);
    this.serviceB = injector.get(ServiceB);
  }
}

export class Child extends Base {
  constructor(
    private injector: Injector
  ) {
    super(injector);
  }
}

Answer 2

In my opinion, the most effective way to achieve this is by incorporating an Injector into an abstract class. This allows for the injection of multiple services. Subsequently, the injector should be passed into the super() method in each descendant class.

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

export abstract class Base {
  private serviceA: ServiceA;
  private serviceB: ServiceB;

  constructor(
    injector: Injector
  ) {
    this.serviceA = injector.get(ServiceA);
    this.serviceB = injector.get(ServiceB);
  }
}

export class Child extends Base {
  constructor(
    private injector: Injector
  ) {
    super(injector);
  }
}

Incorporate a service into a base class in Angular2 to ensure its functionality extends to all derived classes

Answer №1

Similar questions

Is there a way to simultaneously call two APIs and then immediately call a third one using RXJS?

When initialized within an object, Angular may identify a field as undefined

Angular 4 prohibits certain special characters and the number zero

When working with TypeScript in Node, the module ""http"" does not have a default export available

The Highcharts xrange series is encountering the error message "x is not a function."

Updating Facebook meta tags dynamically in Angular 4 to enhance Open Graph integration

Experience a captivating Angular slideshow carousel that resets when you click on a dot button, all powered by the magical capabilities of

Encountering a Nuxt error where properties of null are being attempted to be read, specifically the 'addEventListener' property. As a result, both the default

Maintaining checked items in their original state while searching for another one in ion-searchbar can be achieved by properly handling

Include a tab button within a vertical tab list using Angular Material

Export interface for material-ui wrapper to cast any type in TypeScript (React)

Is it possible to transfer parameters from one page to another page using the pop method in Ionic 2?

Unlocking Not Exported Type Definitions in TypeScript

Guide to running asynchronous code synchronously in Angular 5

Setting style based on the condition of the router URL

The Angular Tooltip feature is unable to interpret the characters "' '" or "' '"

What are the conditions for Jasmine's .toHaveBeenCalledWith to match the parameters?

Encountered an issue when attempting to send data using this.http.post in Angular from the client's perspective

Is it possible to continuously activate an Angular Input setter using a Subject?

Angular2 - Actively selecting a checkbox in an ngFor loop with a reactive form