在 @Component 和 @Module 中注入提供者之间的 Angular2 有什么区别？答案

【问题标题】：What is the difference in Angular2 between inject a provider in @Component and @Module?在 @Component 和 @Module 中注入提供者之间的 Angular2 有什么区别？
【发布时间】：2017-03-02 17:39:59
【问题描述】：

在 angular2 中，可以在 @Component 元素中定义提供程序，例如

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css'],
  providers : [ DataService ]
})
export class HomeComponent implements OnInit {

...
}

还有一个

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
  ],
  providers: [ DataService ],
  bootstrap: [AppComponent ]
})
export class AppModule { }

在@NgModule 或@Component 中定义提供者有什么区别？如果我应该选择两者之一，定义提供者的更好的地方应该是什么？

【问题讨论】：

标签： angular

【解决方案1】：

Angular 应用程序是一个组件树。每个组件都有自己的注入器。因此，您有一棵注入器树。假设，您有以下设置：

    AppComponent
  /            \
 C1            C2
              /  \
            C3   C4

现在，如果您在任何@NgModule 中定义提供程序（除了延迟加载的），您将能够在任何组件（C1, C2, C3, C4）中访问该提供程序。如果您在@Component 中定义提供程序，例如在C2 中，则只有C2 及其子C2 将能够访问该提供程序。但即使这是可配置的。您可以使用额外的装饰器，例如 @Self 来搜索组件声明的依赖项。

【讨论】：

【解决方案2】：

@NgModule： service 将是注入服务的模块的子组件内的单例（在构造函数内）。

@Component: 服务将是组件及其子组件内的单例。

来源：https://angular.io/docs/ts/latest/guide/dependency-injection.html#when-to-use-the-ngmodule-and-when-an-application-component-

何时使用 NgModule，何时使用应用程序组件？

一方面，NgModule 中的提供程序在根注入器中注册。这意味着在 NgModule 中注册的每个提供程序都可以在整个应用程序中访问。

另一方面，在应用程序组件中注册的提供程序仅在该组件及其所有子组件上可用。

【讨论】：

【解决方案3】：

区别在于范围。

其实

“注入”是向构造函数添加参数。
将其添加到providers: [...] 是“提供”

提供一个组件会导致多个实例

如果在组件中注册了提供者，您可能会获得与组件实例一样多的提供者值实例（服务实例）。 “可能”，因为如果有提供程序，但从未实际注入，则不会创建任何实例。

查找供应商

当 DI 创建组件、指令、管道或服务实例时，它会检查当前注入器以获取提供者和构造函数参数。如果注入器没有提供者，它会检查父注入器，直到找到提供者或没有父注入器。

注入器层次结构 在（非延迟加载）模块中注册的提供程序被添加到根注入器。延迟加载模块的注入器是子注入器。 AppComponents 注入器也是根注入器的子注入器。每个子组件或指令都会获得父组件注入器的子注入器。

向组件或指令添加提供者

这意味着，当您在组件上提供服务时，该组件及其后代组件会从向该组件注册的提供者那里获取一个实例。在其他任何地方都找不到提供者，因此实例创建将失败。

如果此组件有多个实例，则每个组件（及其后代）将获得此服务的不同实例。

向模块添加提供者

如果在@NgModule()（非延迟加载）中注册了一个提供程序，每个组件和服务都会找到这个提供程序，并且到处都会注入相同的实例。

将提供程序添加到延迟加载的模块

如果在延迟加载模块的@NgModule() 中注册了提供程序，则该服务将仅可用于该模块加载的组件和服务。

【讨论】：