在模块Vs组件/指令中注册提供程序

时间:2017-08-23 16:43:39

标签: angular angular2-directives

我们可以在角度模块或组件/自定义指令中注册提供者吗?

为什么angular团队允许在模块或组件/自定义指令中注册提供程序?有人可以帮助提供有利有弊的实际例子吗?

3 个答案:

答案 0 :(得分:7)

  

为什么有角度的团队允许在模块或者注册提供商   组件/自定义指令?

那是因为他们有不同的范围。在非延迟加载的模块级别注册的提供程序将可用于整个应用程序中的任何组件。在组件级别注册的提供程序仅适用于组件及其子组件。

在只有一个应用级别范围的AngularJS工作了几年之后,我看到当前的Angular范围注入器实现是向前迈出的一大步。为了更好地理解这些好处,假设您正在开发带有小部件的仪表板。用户界面如下所示:

enter image description here

因此,您希望有一个特殊的类负责每个窗口小部件管理。并且您希望窗口小部件中的所有组件都获取特定于其窗口小部件的服务实例。在AngularJS中,这很难实现,因为如果我们在应用程序级别注册此服务,则只会创建一个实例。但在Angular中,这个问题很容易解决。我们在WidgetComponent中注册该服务,然后该组件的子节点将注入它们自己的服务实例。

答案 1 :(得分:2)

嗯,注册提供者的两种方法是:

  1. 模块级别
  2. 组件级别
  3. 模块级提供商:

    可以肯定的是,您将在同一模块下列出许多组件。因此,通过在模块级别提供服务,该模块下的所有组件都可以直接访问服务。

    组件/指令级提供商:

    如果您在组件级别提供服务,则只有该特定组件及其子组件树才能与之交互。没有其他组件可以与该服务进行交互。

    我能想到的一个专业是可访问性。在组件级别提供服务将使该服务仅可用于该组件。

    假设您希望服务S仅由组件C1访问,而不是C2,C3,并且所有三个都在同一模块M下并且处于同一级别。在这种情况下,您可以在组件C1处提供服务。因此C2和C3无法访问或访问它。如果您想要一个应该被所有组件C1,C2和C3使用的共享服务,那么您应该在模块M中提供服务S.

答案 2 :(得分:0)

@Injectable({
  providedIn: 'root'
})

此注释在服务类上方提供。 这可以从Angular 6版本中获得。在此之前,即从Angular 2到5,我们需要在appModule.ts中的提供者中提供服务

例如提供者:appModule.ts中的[服务名称]

当我们在组件元数据中(即在@Component装饰器中通过向提供者[Servicename]提供服务)时, 那么该服务仅适用于该组件,而不适用于项目中的其余组件。