Angular 2中依赖于服务的服务的提供商,该服务没有被bootstrap()实例化



服务B持有对服务a的引用——如果我要通过Angular2 bootstrap()方法实例化服务a,我所需要做的就是在服务B的构造函数中添加对服务a的引用,然后Angular就会愉快地将服务a注入到服务B中……但是,如果组件1需要它自己的服务B实例,组件2需要它自己的服务B实例怎么办?如何为服务B提供其依赖服务A的唯一实例(例如,组件1的服务A的状态不应该受到组件2的服务A的状态的影响)?——这意味着服务B需要能够实例化独立的服务A实例…我想我可以在服务A中new服务B(但这不是依赖注入)…我基本上想要providers: []元数据的服务注入到服务…

或(更简单)

有人可以分享一个服务的代码示例,从其他地方而不是bootstrap()方法或组件提供?

不幸的是,服务没有办法提供它们的依赖项。

最好是导出一个providers数组,并在所需的组件中提供它。

Export class ServiceB {
  constructor(serviceA: ServiceA) {}
 ... 
}
Export const SERVICEB_PROVIDERS = [ ServiceB, ServiceA ];

然后在组件中:

@Component {
  ... 
  providers: [SERVICEB_PROVIDERS]
  ... 
}

当你在@Component中指定一个providers属性时,你是在告诉依赖注入为这个特定组件提供一个新实例。

如果你没有在providers中指定服务,依赖项请求会冒泡到下一个父组件中,并会继续在每个父组件中寻找提供商,直到找到一个提供商,或者到达你的bootstrap函数。

这将赋予Component1它自己的ServiceB。它不会是你在bootstrap中提供的引用:

@Component({
    selector: "Component1",
    templateUrl: "./blah/component1.component.html",
    providers: [ServiceB]
})
export class Component1{
...

如果它没有在父组件中找到另一个providers属性,它将从你的bootstrap函数中获得ServiceB。

@Component({
    selector: "Component2",
    templateUrl: "./blah/component2.component.html"
})
export class Component2{
...

我从Victor Savkin关于Angular依赖注入的博客文章中摘录了以下内容

// Angular 2: Configuring LoginService
@Injectable() class LoginService {
  constructor(@Inject("LoginServiceConfig") public config: {url: string}) {}
  //...
}
@Component({
  selector: 'app',
  template: `<login></login>`,
  directives: [Login],
  providers: [
        LoginService,
        provide("LoginServiceConfig", {useValue: {url: 'myurl'})
    ]
})
class App {}

它说明了如何将(子)服务注入到(父)服务中,其中注入到(父)服务中的(子)服务是(必须是?)由组件使用父组件提供(父)服务的父组件提供的…

最新更新