Angular duplicate construtor

Question

I have 4 components with 4 times the same construtor, being a beginner I don't know how to go about trying to do that differently, maybe do a service that includes what I call?

What do you suggest to me and how to do it?

The constructor code that appears on 4 components :

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

    }

micronyks · Accepted Answer · 2020-08-03T13:55:17.280

You can create a singleton service to resolve it,

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

        // declare variables here
   
        constructor(private transverseService: TransverseService, 
                    private webReferentielService: WebReferentielService, 
                    /** inject 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;
        });

    }  
}

In component(s),

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

Mark · Answer 2 · 2020-08-03T14:03:38.513

1

You can make use of an abstract class and have your 4 components extend from this class.

export class AbstractComponent {
  constructor(
    protected transverseService: TransverseService,
    protected webReferentielService: WebReferentielService
  ) {
    // do constructor stuff here
    // ...
  }
}

And your components would look like this:

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


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

edited Aug 03 '20 at 14:03

answered Aug 03 '20 at 13:35

Mark

680
5
15

Please check that you can't use DI like that anymore. DI only works when you add Angular decorator (on parent too). https://blog.bitsrc.io/component-inheritance-in-angular-acd1215d5dd8 – Gilsdav Aug 03 '20 at 13:37
2

In most scenario @micronyks version is better. Remember https://stackoverflow.com/questions/49002/prefer-composition-over-inheritance – Christian Aug 03 '20 at 13:48
I may not have paid enough attention what the constructor was doing :) If it was just component related things, this would be an acceptable solution. In this case a service is better indeed. – Mark Aug 03 '20 at 14:01
Thank for you anwser, but i prefer use a service :) – DLx Aug 03 '20 at 14:24

Angular duplicate construtor

2 Answers2