Angular2 - 注入@Injectable
Angular2 - inject into @Injectable
我有一个带有 service
的 Angular2
应用程序,用于从 API 获取数据。按照 this 示例,我想创建一个单独的文件,其中应包含一些配置数据。我的问题是我的服务有一个 @Injectable()
装饰器,我不确定我是否可以在元数据中向它传递一个 provide
数组,我将在其中注入配置,如教程中所示。欢迎遇到过此类问题的任何人分享他的解决方案:)
这是不支持的。对于服务,需要将提供者添加到 bootstrap(AppComponent, [..., Service, ServiceDependency1, ...])
事实上,Angular2 利用分层注入器并且注入器链接到组件。简而言之,您只能在组件(providers
属性)或应用程序级别(bootstrap
函数)定义提供程序。
关于服务,它们将能够使用对发起调用的组件可见的提供程序,但您不能在它们的级别定义提供程序。
这是一个示例:
Application
|
AppComponent
|
ChildComponent
getData() --- Service1 --- Service2
在这样的应用中,我们有三个注入器:
- 可以使用
bootstrap
函数的第二个参数配置的应用程序注入器
- 可以使用此组件的
providers
属性配置的 AppComponent
注入器。它可以 "see" 在应用程序注入器中定义的元素。这意味着如果在此提供程序中找不到提供程序,它将自动查找此父注入器。如果在后者中找不到,将抛出 "provider not found" 错误。
ChildComponent
注入器将遵循与 AppComponent
相同的规则。要注入组件执行的注入链中涉及的元素,将首先在此注入器中查找提供者,然后在 AppComponent
中查找,最后在应用程序中查找。
这意味着当尝试将 Service1
注入 ChildComponent
构造函数时,Angular2 将查看 ChildComponent
注入器,然后是 AppComponent
注入器,最后进入申请一.
由于Service2
需要注入Service1
,所以会做同样的解析处理:ChildComponent
注入器,AppComponent
一个和应用一个
这意味着 Service1
和 Service2
都可以根据您的需要使用组件的 providers
属性和 [=12= 的第二个参数在每个级别指定] 应用程序注入器的函数。
这个答案可以帮助你:
- What's the best way to inject one service into another in angular 2 (Beta)?
有点奇怪,但是只有组件可以在Angular中配置依赖注入(好吧,和bootstrap()
一样,但本质上和根组件是一样的)。即,只有组件可以指定提供者。
正如@Thierry 在他的回答中提到的那样,如果组件指定了 providers
数组,则组件树中的每个组件都将获得关联的 "injector"。我们可以把它想象成一个注入器树,它(通常)比组件树稀疏。当需要解决依赖关系时,将查询此注入器树。可以满足依赖关系的第一个注入器会这样做。注入器树向上走,朝向根component/injector。
因此,为了让您的服务注入配置对象依赖项,该配置对象首先必须向注入器注册。即,在组件的 providers
数组中,调用
provide(stringToken or OpaqueToken, {useValue: MyConfigObject} )
此注册必须发生在您要 use/inject 服务的组件或组件上方的某个位置。
然后您的服务应该能够 @Inject
已注册的配置对象,因为它会在注入器树中找到它。
注意,由于只有组件可以配置提供者,@Injectable()
装饰器不支持任何配置选项,因此不支持 providers
数组。
我有一个带有 service
的 Angular2
应用程序,用于从 API 获取数据。按照 this 示例,我想创建一个单独的文件,其中应包含一些配置数据。我的问题是我的服务有一个 @Injectable()
装饰器,我不确定我是否可以在元数据中向它传递一个 provide
数组,我将在其中注入配置,如教程中所示。欢迎遇到过此类问题的任何人分享他的解决方案:)
这是不支持的。对于服务,需要将提供者添加到 bootstrap(AppComponent, [..., Service, ServiceDependency1, ...])
事实上,Angular2 利用分层注入器并且注入器链接到组件。简而言之,您只能在组件(providers
属性)或应用程序级别(bootstrap
函数)定义提供程序。
关于服务,它们将能够使用对发起调用的组件可见的提供程序,但您不能在它们的级别定义提供程序。
这是一个示例:
Application
|
AppComponent
|
ChildComponent
getData() --- Service1 --- Service2
在这样的应用中,我们有三个注入器:
- 可以使用
bootstrap
函数的第二个参数配置的应用程序注入器 - 可以使用此组件的
providers
属性配置的AppComponent
注入器。它可以 "see" 在应用程序注入器中定义的元素。这意味着如果在此提供程序中找不到提供程序,它将自动查找此父注入器。如果在后者中找不到,将抛出 "provider not found" 错误。 ChildComponent
注入器将遵循与AppComponent
相同的规则。要注入组件执行的注入链中涉及的元素,将首先在此注入器中查找提供者,然后在AppComponent
中查找,最后在应用程序中查找。
这意味着当尝试将 Service1
注入 ChildComponent
构造函数时,Angular2 将查看 ChildComponent
注入器,然后是 AppComponent
注入器,最后进入申请一.
由于Service2
需要注入Service1
,所以会做同样的解析处理:ChildComponent
注入器,AppComponent
一个和应用一个
这意味着 Service1
和 Service2
都可以根据您的需要使用组件的 providers
属性和 [=12= 的第二个参数在每个级别指定] 应用程序注入器的函数。
这个答案可以帮助你:
- What's the best way to inject one service into another in angular 2 (Beta)?
有点奇怪,但是只有组件可以在Angular中配置依赖注入(好吧,和bootstrap()
一样,但本质上和根组件是一样的)。即,只有组件可以指定提供者。
正如@Thierry 在他的回答中提到的那样,如果组件指定了 providers
数组,则组件树中的每个组件都将获得关联的 "injector"。我们可以把它想象成一个注入器树,它(通常)比组件树稀疏。当需要解决依赖关系时,将查询此注入器树。可以满足依赖关系的第一个注入器会这样做。注入器树向上走,朝向根component/injector。
因此,为了让您的服务注入配置对象依赖项,该配置对象首先必须向注入器注册。即,在组件的 providers
数组中,调用
provide(stringToken or OpaqueToken, {useValue: MyConfigObject} )
此注册必须发生在您要 use/inject 服务的组件或组件上方的某个位置。
然后您的服务应该能够 @Inject
已注册的配置对象,因为它会在注入器树中找到它。
注意,由于只有组件可以配置提供者,@Injectable()
装饰器不支持任何配置选项,因此不支持 providers
数组。