How to prevent passing parameter in constructor of typescript class when class uses other services in angular?

Question

I want to use angular class and service mechanism for my project's scalable structure.

I have created one component, named : car I have created one class, named : wheel I have created one service, named : rotate

Now according to my flow.

car component is look like this :

import { wheel } from './Class/wheel';

  @Component({
    selector: 'app-car',
    templateUrl: './car.page.html',
    styleUrls: ['./car.page.scss'],
  })

  export class car implements OnInit {

    car:any = [];
    wheelSection: Wheel;

    constructor(){
    }

    ngOnInit() {
      this.WheelSection =  new Wheel();   // I don't want to pass any parameter here..
     this.car.push(WheelSection);
    }

}

Wheel class is look like this :

import { Rotate } from '../Service/Rotate.service';

export class Wheel {
    
   wheelRing:any;
   WheelRotate:any;

    constructor(private rotateService: Rotate){
      this.WheelRotate = rotateService.rotate();
    }
}

I have tried this code and it is giving me error at the wheel class's initialization in car component's regarding that 1 argument required but you send 0 argument...

Here in above two code. Wheel class constructor needs one parameter for initialize that class in car component. but I don't want to pass any parameter into that wheel class's constructor.

Is there any way to do this kind of flow for initialize class object without passing provider parameter into constructor ?

The main reason is not passing that into constructor is that there are many services used by various classes and all it's import are in base main component is some kind of weird stuff.

Please help me if any one have a solution about this.

This is probably not a very realistic scenario in Angular... Also, this is simply how class inheritance in most languages works (nothing to do with Angular really). So in your Wheel class you are assuming that DI works I guess? However, you could simply not DI the service there and also instantiate it yourself. Then this would work fine.. — MikeOne
– MikeOne, Commented Sep 9, 2020 at 19:14

erik karlstrom · Accepted Answer · 2020-09-09 19:18:41Z

1

I would have expected the rotateService to be injected into the car component, and the wheelRotate to be passed to the Wheel.

If you don't want to use a constructor why not have a rotate method on wheel that takes a WheelRotate argument?

wheel = new Wheel();
wheel.initRotation(rotateService.rotate());

answered Sep 9, 2020 at 19:18

erik karlstrom

338 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mayur Kukadiya Over a year ago

Thanks for reply me quickly but Actually, this is just for example.. I have complex project structure of classes and services... I can put that rotate function into my class and my problem will solved but I have another problem.... because one of my code, I used Platform from @ionic/angular for get device's width, so how can i move that platform parameter....into class. I don't know about it...

ntoniocp · Accepted Answer · 2020-09-09 20:53:24Z

1

In typescript you can specify optional parameters by adding a question mark after the name, like this

export class Wheel {
    
   wheelRing:any;
   WheelRotate:any;

    constructor(private rotateService?: Rotate){

        if (rotateService) {
          this.WheelRotate = rotateService.rotate();
        }
    }
}

Note that you will have to check if the rotateService exist, because when you don't specify the value of an optional parameter it has the value of undefined

answered Sep 9, 2020 at 20:53

ntoniocp

322 bronze badges

1 Comment

Mayur Kukadiya Over a year ago

Hey Buddy, Thanks a lot for reply, I will try this solution in my project.

Collectives™ on Stack Overflow

How to prevent passing parameter in constructor of typescript class when class uses other services in angular?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related