Use classes in component and dependency injection

Question

I use Angular and have 1 component, 1 class and 1 service.

My service is an @injectable class and well setted in app.module.ts.

@Injectable()
export class MyService {

My class get the service as an dependency injection.

import { MyService } from '../services/myService';

export class MyClass {
  constructor(
    myService: MyService
  ) {

In the component constructor i try to make a new instance of my class MyClass.

export class MyComponent implements AfterViewInit {
  constructor(
  ) {
    const myClass = new MyClass();
  }

But i got : "Expected 1 arguments, but got 0".

So my question is how use classes and enjoy Dependency Injection ? I found nothing clear about that.

Or, i have to add the depencies in my component constructor and pass them to my class ?

A better way to mix maybe ?

Thanks in advance,

I think this answer should help you https://stackoverflow.com/a/41433007/3153226 — Ap0st0l, Jun 25 '18 at 12:34
Thanks but already readed and not my case, i want a custom class and this class can benefits of DI. — Killan, Jun 25 '18 at 12:51

Vinod Bhavnani · Accepted Answer · 2018-06-25T12:43:34.360

1

There are some points to know before you can do this.

1) Do you want to share the same instance of the service with your class and component?

If yes, you can then "PROVIDE" the service in your COMPONENT and pass the instance of the service to your CLASS.

@Component({
  selector: '',
  templateUrl: '',
  providers: [Provide your service here]
})
export class MyComponent implements AfterViewInit {
  constructor(serv: MyServ){
    const myClass = new MyClass(serv);
  }
}

Please note that if you have provided the service in a module already, you don't need to provide it in the component again.

The advantage of this is that you are now sharing the same instance of your service with your class and component both.

2) If you do not want to share the instance, you could simply create a new instance of the service in your class constructor.

import { MyService } from '../services/myService';

export class MyClass {
  constructor(myService: MyService = new MyService()) {

  }
}

Here you have given a default parameter to your class constructor. So if someone (Component in your case) passes the service instance, it will use that, otherwise it will create it's own instance.

edited Jun 25 '18 at 12:43

answered Jun 25 '18 at 12:36

Vinod Bhavnani

2,185
1
16
19

Hi, thanks for the answer, your point 1 is near that what i want, but the question is is it possible without passing the service through all classes that don't now nothing about DI needed.And no need providers for my case, component is just my launch point. – Killan Jun 25 '18 at 12:53
To be more explicit, it's like my component is the bootstrap for a game, and i want to launch the engine, but the first class has not to instanciate all service and pass throught all classes till the class endpoint. So i beleive DI make optional argument and automatically filled. – Killan Jun 25 '18 at 12:57
1

Hi, no it is not possible. The dependency injection works sequencially and your class is not instantiated by angular. Since you instantiate the class yourself, you cannot take the advantage if dependency injection for your class – Vinod Bhavnani Jun 25 '18 at 12:58
Ok thanks. So if i insanciate multiple levels of classes, i have to pass all services needed and can't benefit like a global container. – Killan Jun 25 '18 at 13:02
1

Yes, hence the concept of components. So basically DI can be taken advantage only if you do stuff in Angular sequence. Any explicit class that has a dependency, should be provided that dependency explicitly – Vinod Bhavnani Jun 25 '18 at 13:04

Use classes in component and dependency injection

1 Answers1