在 Angular 中，服务是一种非常重要的概念。与组件不同，服务是跨组件共享数据和逻辑的最佳选择。在某些情况下，我们需要确保某些服务只创建一次，然后跨多个组件供应用程序使用。这就是单例服务的用途。本文将介绍如何在 Angular 应用程序中实现单例服务。
什么是单例服务
单例服务是指只有一个实例的服务。当 Angular 应用程序启动时，这个服务仅在第一次使用时实例化，并在随后的任何时间都返回相同的实例。这种形式的服务更加高效，可以提高应用程序的性能。
如何实现单例服务
在 Angular 中实现单例服务很简单。我们只需使用 @Injectable 装饰器以及 providedIn 属性来实现。
例如，在下面的代码中，我们使用 @Injectable 装饰器并将 providedIn 属性设置为 'root'。
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root',
})
export class MyService {
// Service code here
}设置 providedIn 属性为 'root' 表示这个服务将对整个应用程序可见，而不是仅在某个组件的提供商中可见。这也使它成为一个单例服务，因为服务只会被实例化一次。
示例代码
下面是一个示例代码，用来说明如何在 Angular 中实现单例服务。在此示例中，我们创建了一个 CounterService，其中包含一个数字属性和两个方法：一个用于增加数字，另一个用于减少数字。我们将这个服务注入到两个组件中，以便它们可以使用该服务并共享数字。由于我们使用了 providedIn: 'root'，所以服务只会被实例化一次，并跨多个组件共享相同的数字。
counter.service.ts：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
-------------
----------- -------
--
------ ----- -------------- -
------- ------- - --
------ ------------------ ---- -
------------ -- --
-
------ ------------------ ---- -
------------ -- --
-
------ ------------- ------ -
------ -------------
-
-component-1.component.ts：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - -------------- - ---- --------------------
------------
--------- ------------------
--------- -
-----
------------- ------
---------- ------- ------ -- ------- ------
------- ----------------------------------------
------- ----------------------------------------
------
--
--
------ ----- ------------------- -
------ -------- -------
------------------- --------------- --------------- -
------------ - ---------------------------------
-
------ ------------ ---- -
--------------------------------------
------------ - ---------------------------------
-
------ ------------ ---- -
--------------------------------------
------------ - ---------------------------------
-
-component-2.component.ts：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - -------------- - ---- --------------------
------------
--------- ------------------
--------- -
-----
------------- ------
---------- ------- ------ -- ------- ------
------- ----------------------------------------
------- ----------------------------------------
------
--
--
------ ----- ------------------- -
------ -------- -------
------------------- --------------- --------------- -
------------ - ---------------------------------
-
------ ------------ ---- -
--------------------------------------
------------ - ---------------------------------
-
------ ------------ ---- -
--------------------------------------
------------ - ---------------------------------
-
-我们可以看到，Component1Component 和 Component2Component 都注入了 CounterService，并可以使用其方法来共享数字。
总结
单例服务是 Angular 中一个很有用的概念，它使我们可以跨多个组件共享数据和逻辑，并提高应用程序的性能。在本文中，我们介绍了如何在 Angular 应用程序中实现单例服务。我们使用 @Injectable 装饰器以及 providedIn 属性来实现。希望本文对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6479b151968c7c53b05ab712