0

Suppose there is a parent component P . Having two child components B and C . I provide a service (MyService let's say) in the ElementInjector of P and Inject the service in the constructor of P component class. I Inject the service again in the two child components B and C .

My question is whether the instance of the service available with B,C and P will be the same in this case ?

And what if I Inject the service only in the two child components B and C and NOT in the parent component P . Will B and C have separate Instances of the MyService service in this case ?

Here is an image to help visualize the components . Parent Component P with Child Components B and C

Edit:

Service class :

@Injectable()
export class MyService(){
   constructor(){
console.log('My Service instantiated');
}
}

P component's class:

import {MyService} from '...';

@Component({

selector:'Pcomp',
...
providers:[MyService]
})

export class PComponent {
 constructor(public myservice:MyService){
}
}

Component B class :

import {MyService} from '...';

@Component({

selector:'Bcomp',
...

})

export class BComponent {
 constructor(public myservice:MyService){
}
}

Component C class:

import {MyService} from '...';

@Component({

selector:'Ccomp',
...
})

export class CComponent {
  constructor(public myservice:MyService){
}
}
Rishav Mahapatra
  • 87
  • 2
  • 11
  • For a more detailed answer, can you please share how you specified the Service (eg how does the `@Injectable` decorator look like) and how you pass / inject it in the other parts of your app? – Philipp Meissner Jul 30 '20 at 12:27
  • The service is provided at the component level , Specifically at the @Component decorator of P's component class. `@Component({selector:'P',template:'...',providers:[MyService]})...` – Rishav Mahapatra Jul 30 '20 at 12:37
  • Just share the code rough code in your first post, also of the service so we can see which options you pass into the `Injectable` decorator :) – Philipp Meissner Jul 30 '20 at 12:44
  • Services are/were used as singletons across a module. Since Angular 9, services are something more than just singletons now. Again, It all depends on your usage of metadata specifically `providedIn` and `providers`. Take a look here, you can also limit your provider scope with component https://angular.io/guide/providers#limiting-provider-scope-with-components . As provider is at P component level, in your case B and C should have same instance. – bron10 Jul 30 '20 at 12:56
  • @bron1010 yes I also think so . All three P , B and C will share the same instance of the MyService service . – Rishav Mahapatra Jul 30 '20 at 13:10

2 Answers2

0

If you are using angular CLI, service will be generated with something like this

@Injectable({
  providedIn: 'root',
})

So service is generated as a singleton and that means only one instance can exist int an app. I think it is recommended to create a service as a singleton.

juniordevlife
  • 1
  • 1
    Whether or not a service *should* be a singleton and what is best practice ultimately comes down to what you want to achieve. Sometimes you want global singletons, other times you want singletons scoped by a feature-module (but newly instantiated for every emebdding module), .. - Again, depends on what you want to achieve. – Philipp Meissner Jul 30 '20 at 12:26
  • 1
    Thanks for clarifications!!! I never used services scoped by a feature-module. – juniordevlife Jul 30 '20 at 12:37
  • You are welcome. For more info: https://angular.io/guide/singleton-services – Philipp Meissner Jul 30 '20 at 12:43
0

Services are/were used as singletons across a module. Since Angular 9, services are something more than just singletons now. what I mean by this is having new instance of service with a lazy loaded module.

Lazy loading is when you load modules only when you need them; for example, when routing.They aren’t loaded right away like with eagerly loaded modules. This means that any services listed in their provider arrays aren’t available because the root injector doesn’t know about these modules. -- angular.io guide

Hence, It all depends on your usage of metadata especially using providedIn in service injectable decorator and providers for component decorator.

In above case, if we limit MyService as a provider to a component, it will be limited to that component. Mentioning a piece of above code as below.

@Component({
    selector:'Pcomp',
...
    providers:[MyService]
})

As provider is at Pcomp level, Pcomp and its descendant Bcomp and Ccomp can leverage MyService as a singleton.

Reference : https://angular.io/guide/providers#limiting-provider-scope-with-components

bron10
  • 151
  • 2
  • 11