在 Angular 中，服务是提供代码重用和可维护性的关键因素。它们在 Angular 中很重要，因为它们被用来封装一些在应用程序中需要用到的功能以及将组件之间的数据共享。本文将介绍 Angular 中的三种服务实现方法：普通服务、Providers 和 @Injectable。
普通服务
普通服务是我们在 JavaScript 中所见的最基本的服务。它们由一个带有业务逻辑的函数或对象组成，并返回所需的结果。
以下是一个简单的 “Hello World” 应用程序服务：
------ ----- ----------------- -
---------- -
------ ------ --------
-
-在组件中使用这个服务：
------ - --------- - ---- ----------------
------ - ----------------- - ---- ------------------------
------------
--------- -----------
--------- ----------------------
--
------ ----- ------------ -
-------- -------
------------------- ------------------ ------------------ -
------------ - ----------------------------------
-
-Providers
Provider 是 Angular 提供的另一种服务实现方法。它们通常被用来在组件之间共享服务实例。
下面是一个使用 provider 的例子：
------ - ---------- ---------- - ---- ----------------
-------------
------ ----- ----------------- -
---------- -
------ ------ --------
-
-
------------
--------- -----------
--------- -----------------------
---------- -------------------
--
------ ----- ------------ -
-------- -------
------------------- ------------------ ------------------ -
------------ - ----------------------------------
-
-在这个例子中，我们把 HelloWorldService 作为一个 provider 放进了组件的 providers 数组中。在这个组件实例被创建之后，Angular 会负责实例化 HelloWorldService，并且在这个组件及其子组件内共享这个实例。这样，当一个组件通过依赖注入请求 HelloWorldService 实例时，Angular 会返回同一个实例。
@Injectable
@Injectable 是一个装饰器，也是一个能让我们的服务在 Angular 应用中使用依赖注入特性的装饰器。
下面是一个使用 @Injectable 的例子：
------ - --------- - ---- ----------------
-------------
------ ----- ----------------- -
---------- -
------ ------ --------
-
-
------------
--------- -----------
--------- ----------------------
--
------ ----- ------------ -
-------- -------
------------------- ------------------ ------------------ -
------------ - ----------------------------------
-
-通过在服务类上加 @Injectable 装饰器，我们告诉 Angular 来使用服务并正确地进行依赖注入。
结论
本文介绍了 Angular 中的三种服务实现方法：普通服务、Providers 和 @Injectable。它们在 Angular 应用程序中都非常有用，因为它们可以提高代码的重用和可维护性。
如果你是 Angular 开发者，对服务有了初步的了解，那么考虑这些方法的不同用途，并了解什么情况下该使用它们，可以让你更好地构建 Angular 应用程序。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/671ff8262e7021665e003443