在AngularJS 2.0 Heroes教程说明中,它声明如果子组件在其@Component Providers列表中包括服务,则Angular将为该子组件创建该服务的单独实例。我不明白的是,如果有时候您想独立使用子组件,而有时又想在父组件中使用,该怎么办。这似乎是一个严格的限制。我只是在玩Angular 2.0,所以很可能是我误解了一些东西。
这是Heroes Tutorial的Services部分中Angular.io网站上的说明。
附录:掩盖父母的服务
前面我们曾说过,如果将父AppComponent HeroService注入HeroDetailComponent,则一定不能将provider数组添加到HeroDetailComponent元数据。
为什么?因为这告诉Angular在HeroDetailComponent级别创建HeroService的新实例。HeroDetailComponent不需要自己的服务实例。它需要其父级的服务实例。添加providers数组会创建一个新的服务实例,该实例会遮盖父实例。
请仔细考虑何时何地注册提供商。了解注册的范围。注意不要在错误的级别上创建新的服务实例。
如果您希望组件具有其自己的服务实例,同时又具有其父服务的实例,则必须看一下 @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。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句