5

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

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

附录：影子父母的服务

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

为什么？因为这告诉 Angular 在 HeroDetailComponent 级别创建一个新的 HeroService 实例。HeroDetailComponent 不想要自己的服务实例；它想要其父级的服务实例。添加 providers 数组会创建一个新的服务实例，它会隐藏父实例。

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

这是指向此页面的链接，以将其置于上下文中。

4

1 回答 1

11

如果您希望组件拥有自己的服务实例，同时拥有其父服务的实例，则必须查看@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 中的可见性和 Angular 2 的依赖注入中的可见性。

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

于 2016-01-25T02:39:35.560 回答