在Angular 2.0中注入服务提供商

达里尔

在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数组会创建一个新的服务实例,该实例会遮盖父实例。

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

这是此页面的链接,将其置于上下文中。

埃里克·马丁内斯(Eric Martinez)

如果您希望组件具有其自己的服务实例,同时又具有其父服务的实例,则必须看一下 @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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

Angular2全球服务提供商

Angular2 / testing:如何使用模拟服务提供商运行测试?

Angular 2-跨多个浏览器窗口的单一服务提供商

没有提供Modal Angular2的提供商

失败:没有提供Reflector的提供商!使用业力在angular2中运行测试时出错

在innerHTML angular 2中注入<input>

如何从行动注入Angular 2服务中的提供者?

Angular 2(Mock Ionic2)-无应用程序提供商

WSO2 Identity Server中的SCIM服务提供商

服务提供商的WSO2证书设置

使用SAML 2和Java的服务提供商实现

Payara glassfish与SAML2服务提供商的集成

使矩可在angular2中注入

在Angular2中注入模板HTML局部

如何在Angular 2中注入document.body

在Angular 2中注入动态指令/组件

如何在另一个服务提供商内致电服务提供商-angularjs2

是否已经为 WSO2 身份服务器中列出的服务提供商内置了 SSO 功能?

在Angular 2(Ionic 2 / Angular 2 / Typescript)的服务中注入服务时如何传递依赖关系的参数

如何在wso2is中为版本5.2.0的不同租户配置服务提供商

在Angular 2的另一个服务中注入自定义服务

在其他服务 Angular 2 中注入服务出现问题

在@Component和@Module中注入提供程序之间,Angular2有什么区别?

Angular2:注入服务

WSO2身份服务器5.0-预先配置的服务提供商

在Angular 2的构造函数中注入了Router的麻烦的单元测试服务

在Angular2的自定义验证器中注入服务

将服务注入angular2中的服务

在Angular中注入通用服务