在Angular 2.0中注入服务提供者

Question

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

以下是来自Heroes Tutorial服务部分的Angular.io网站的解释.

附录:隐藏父母的服务

我们之前说过,如果我们将父AppComponent HeroService注入HeroDetailComponent,我们不能将提供者数组添加到HeroDetailComponent元数据中.

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

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

这是指向将其置于上下文中的页面的链接.

Answer 1

如果您希望Component拥有自己的服务实例,同时拥有其父服务的实例,您必须查看 @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中了解有关Angular 2的依赖注入中主机和可见性的可见性的更多信息.

用一个工作示例检查这个plnkr.