Question

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

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

附录：隐藏父母的服务

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

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

仔细考虑注册提供商的位置和时间。   了解该注册的范围。小心不要创建   新服务实例处于错误的级别。

Here's the link到这个来源的页面，将其置于上下文中。

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了解Host and Visibility in Angular 2's Dependency Injection中的可见性。

使用一个工作示例检查此plnkr。

在Angular 2.0中注入服务提供者

1 个答案: