在 Angular 2.0 中注入服务提供者

Question

在 AngularJS 2.0 Heroes 教程的解释中，它指出如果一个子组件在其 @Component Providers 列表中包含一个服务，那么 Angular 将创建一个特定于该子组件的单独的服务实例。我不明白的是，如果有时您想独立使用子组件，而有时在父组件中使用，您会怎么做。这似乎是一个严格的限制。我刚刚玩过 Angular 2.0，所以很可能我误解了一些东西。

这是来自英雄教程服务部分的 Angular.io 网站的解释。

附录：跟踪父服务

我们之前说过，如果我们注入父 AppComponent HeroService 进入 HeroDetailComponent 中，一定不能添加providers 到 HeroDetailComponent 元数据的数组。

为什么？因为这告诉 Angular 创建一个新的实例 HeroDetailComponent 级别的 HeroService。 HeroDetail组件 不想要自己的服务实例；它想要它的父母的服务 实例。添加 providers 数组会创建一个新的服务实例 这会影响父实例。

仔细考虑注册提供商的地点和时间。 了解该注册的范围。注意不要创建 错误级别的新服务实例。

Here's the link 将其置于上下文中。

Answer 1

如果您希望组件拥有自己的服务实例，同时拥有其父服务的实例，您必须查看@SkipSelf()

考虑下面的代码

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';
  }
}

使用@SkipSelf()，我们告诉组件从父注入器开始依赖解析（我猜SkipSelf 这个名字说明了很多）。

您可以在@PascalPrecht 的Host and Visibility in Angular 2's Dependency Injection 中阅读有关可见性的更多信息。

通过一个工作示例检查此plnkr。