Angular constructor replication

Question

Angular constructor replication

I am facing a dilemma with 4 components, all of which have the same constructor. As a beginner, I am unsure how to approach this problem differently. Should I consider creating a service that encompasses what I refer to as common elements?

What would be your recommendation on how to handle this situation effectively?

The current constructor code used across all 4 components is as follows:

constructor(private transverseService: TransverseService, private webReferentielService: WebReferentielService) {

        this.transverseService.setLanguage(new Messages(this.webReferentielService));
        this.messages = this.transverseService.getMessages();

        transverseService.messageObservable.subscribe(
            msg => {
                this.messages = msg;
            }
        );

        this.transverseService.initConfig().then(data => {
            this.configEnv = data;
            this.version = this.configEnv.version;
            this.env = this.configEnv.env;
        });

    }

angular typescript duplicates

Answer 1

Answer №1

To tackle this, you have the option of developing a singleton service,

@Injectable({providedIn: 'root'}) 
export class SomeService{

        // include variable declarations here
   
        constructor(private transverseService: TransverseService, 
                    private webReferentielService: WebReferentielService, 
                    /** insert other dependencies */) {

        this.transverseService.setLanguage(new Messages(this.webReferentielService));
        this.messages = this.transverseService.getMessages();


        transverseService.messageObservable.subscribe(
            msg => {
                this.messages = msg;
            }
        );

        this.transverseService.initConfig().then(data => {
            this.configEnv = data;
            this.version = this.configEnv.version;
            this.env = this.configEnv.env;
        });

    }  
}

When it comes to components(s),

    constructor(private someService: SomeService){
         // utilize someService here
    }

Answer 2

To tackle this, you have the option of developing a singleton service,

@Injectable({providedIn: 'root'}) 
export class SomeService{

        // include variable declarations here
   
        constructor(private transverseService: TransverseService, 
                    private webReferentielService: WebReferentielService, 
                    /** insert other dependencies */) {

        this.transverseService.setLanguage(new Messages(this.webReferentielService));
        this.messages = this.transverseService.getMessages();


        transverseService.messageObservable.subscribe(
            msg => {
                this.messages = msg;
            }
        );

        this.transverseService.initConfig().then(data => {
            this.configEnv = data;
            this.version = this.configEnv.version;
            this.env = this.configEnv.env;
        });

    }  
}

When it comes to components(s),

    constructor(private someService: SomeService){
         // utilize someService here
    }

Answer 3

Answer №2

To create a common base for your 4 components, you can utilize an abstract class that they will all extend.

export class AbstractComponent {
  constructor(
    protected transverseService: TransverseService,
    protected webReferentielService: WebReferentielService
  ) {
    // any necessary initialization logic can go here
    // ...
  }
}

Your individual components would then be structured like this:

@Component({
  selector: 'component-1',
  ...
})
export class ComponentOne extends AbstractComponent {
  // inherits the constructor from the abstract class
}


@Component({
  selector: 'component-2',
  ...
})
export class ComponentTwo extends AbstractComponent {
  // also inherits the constructor from the abstract class
}

Answer 4

To create a common base for your 4 components, you can utilize an abstract class that they will all extend.

export class AbstractComponent {
  constructor(
    protected transverseService: TransverseService,
    protected webReferentielService: WebReferentielService
  ) {
    // any necessary initialization logic can go here
    // ...
  }
}

Your individual components would then be structured like this:

@Component({
  selector: 'component-1',
  ...
})
export class ComponentOne extends AbstractComponent {
  // inherits the constructor from the abstract class
}


@Component({
  selector: 'component-2',
  ...
})
export class ComponentTwo extends AbstractComponent {
  // also inherits the constructor from the abstract class
}

Angular constructor replication

Answer №1

Answer №2

Similar questions

Using Angular2 to import components and services from a module

I am looking to use Angular Material to perform a calculation on two mat-cell input values and display the result in a separate mat-cell within dynamically added columns

Sort out the information in the table

Looping Through RxJS to Generate Observables

"Implementing self-referencing mongoose models in Typescript: A step-by-step guide

Ways to decrease the space between lines of text within a single mat-option element

What is the method for adding local images to FormData in Expo version 48 and above?

Angular is throwing an error due to an unexpected token when running on an IIS server within a subfolder

Running out of memory due to inefficient mark-compacting processes nearing the heap limit in Angular 8 allocation

Reduced number of node modules

How can I display a div within a parent container in Angular 2?

The confirmPasswordReset function in Angularfire auth is not defined in the User type

A mistake was made: The template contains errors stating that 'app-my-profile' is an unknown element

Converting input tag to a method in component with uppercase transformation

How to halt the ng-serve process

The argument supplied in Angular using TypeScript is incompatible: a 'string' type cannot be assigned to a parameter expecting an 'Element' type

TS2304: The build process is unable to locate the name 'iterable' within @types

What can I do to enhance the efficiency of this function in React?

Dynamic TypeScript class constructor argument typing determined by user input

Angular attribute directive encountered an error during production build, where it was expected to receive 1 argument but instead received