Deployment Service Providers in Angular 2.0

Question

An AngularJS 2.0 Heroes guide explains that if a child component includes the service on its @Component Providers list, then Angular will create a separate instance of this service specific to that child. What I don't understand is what you would do if you sometimes wanted to use the child component yourself, and sometimes in the parent component. This seems like a severe limitation. I just played with Angular 2.0, so most likely I didn’t understand something.

Here's an explanation from Angular.io from the Services section in the Heroes lesson.

Application: Parental Service Shading

We previously stated that if we introduced the parent AppComponent of HeroService in HeroDetailComponent, we should not add array providers to HeroDetailComponent metadata.

Why? As this tells Angular to create a new HeroService instance at the HeroDetailComponent level. The HeroDetailComponent group does not want to have its own service instance; he wants his parental service an example. Adding an array of providers creates a new instance of the service that obscures the parent instance.

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

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

Answer 1

, , @SkipSelf()

class Service {
    someProp = 'Default value';
}

@Component({
  providers : [Service] // Child 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 instance
})
class Parent {
  constructor(svc: Service) {
    svc.someProp = 'Parent instance';
  }
}

@SkipSelf() , ( SkipSelf , ).

Host Visibility Angular 2 Injection of Dependency @PascalPrecht.

plnkr .