Injecting Service Providers in Angular 2.0

Question

In the AngularJS 2.0 Heroes tutorial explanation it states that if a child component includes a service in its @Component Providers list, then Angular will create a separate instance of that service specific to the child. What I don't understand is what you would do if sometimes you wanted to use the child component independently, and other times within a parent component. This seems like a severe restriction. I've just playing with Angular 2.0, so most likely I've misunderstood something.

Here's the explanation from the Angular.io site from the Services section of the Heroes Tutorial.

Appendix: Shadowing the parent's service

We stated earlier that if we injected the parent AppComponent HeroService into the HeroDetailComponent, we must not add a providers array to the HeroDetailComponent metadata.

Why? Because that tells Angular to create a new instance of the HeroService at the HeroDetailComponent level. The HeroDetailComponent doesn't want its own service instance; it wants its parent's service instance. Adding the providers array creates a new service instance that shadows the parent instance.

Think carefully about where and when to register a provider. Understand the scope of that registration. Be careful not to create a new service instance at the wrong level.

Here's the link to the page this came from to put it in context.

Answer 1

If you want a Component to have its own instance of a Service and at the same time to have an instance of its parent's service you have to take a look at @SkipSelf()

Consider the following code

class Service {
    someProp = 'Default value';
}

@Component({
  providers : [Service] // Child's instance
})
class Child {
  constructor(
    @SkipSelf() parentSvc: Service, 
    svc: Service
    ) {
        console.log(pSvc.someProp); // Prints 'Parents instance'
        console.log(svc.someProp);  // Prints 'Default value'
    }
}

@Component({
  providers : [Service] // Parent's instance
})
class Parent {
  constructor(svc: Service) {
    svc.someProp = 'Parent instance';
  }
}

With @SkipSelf() we are telling the component to start the dependency resolution from the parent injector (the name SkipSelf says a lot, I guess).

You can read more about visibility in Host and Visibility in Angular 2's Dependency Injection from @PascalPrecht.

Check this plnkr with a working example.