Angular 中的 Provider 与 Token 的区别与使用

阅读时长 7 分钟读完

在 Angular 中,Provider 和 Token 是两个非常重要的概念。他们是 Angular 提供的构建组件和服务的核心机制。

Provider 和 Token 的定义

  • Provider 是一个可以创建或配置服务实例的工厂函数。
  • Token 是一个注入器的键,它用来为一个可注入对象提供标识或名称。

区别与联系

Provider 和 Token 的关系非常密切,下面介绍一下它们之间的区别与联系。

区别

  • Provider 是一种可创建或配置服务实例的机制,它负责提供依赖项的创建过程。
  • Token 是一种用来获取依赖项的机制,它定义了一个键,用于查找一个注入器中的依赖项。

联系

  • Provider 创建的是一个实际的对象,而 Token 定义的只是一个键,用来获取实际的对象。
  • Provider 和 Token 都是 Angular 中实现依赖注入的核心机制。
  • 在使用依赖注入时,Provider 和 Token 总是配对使用的。

Provider 和 Token 的使用

  • Provider 的使用

Provider 在 Angular 中用来创建服务实例或配置供应商。它可以用来自定义服务,配置依赖项或动态创建或替换依赖项。Angular 中提供了很多种 Provider,可以用来满足不同的需求。

下面以一个例子来说明 Provider 的使用方法。我们会创建一个名为 Config 的服务,它会从外部资源 (app.config.json) 中加载应用程序所需的配置信息。

我们需要做如下几个步骤:

  1. app.module.ts 中将 ConfigService 注册为供应商
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- -------------------

-----------
  ---------- -
    --------------
    -- -----
  -
--
------ ----- --------- - -
  1. 定义 Config 服务,并将 app.config.json 中获取到的配置信息注入到该服务中
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ------------- - ---- -------------------

------ --------- --------- -
  ------- -------
  ---------- --------
-

-------------
------ ----- ------ -
  ------- ------- ----------

  ------------------- -------------- -------------- - -

  ------ -
    ----------- - -------------------------------
  -

  -------- ------- -
    ------ -----------------
  -
-
  1. 在组件中使用 Config 服务
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ------ - ---- -----------

------------
  --------- -----------
  --------- -
    -------- ---- -- ------ --------
    ---------- ----- -- --------- --------
  -
--
------ ----- ------------ -
  ------- ------- -------
  ------- ---------- --------

  ----------------------------- ------- ------- ------- -
    ----------- - ---------------------
    -------------- - ------------------------
  -
-

在上面的例子中,我们使用 ConfigService 提供的 getConfig 方法来获取应用程序的配置信息。然后,将该信息注入到 Config 服务中,以便我们在其他组件中使用。

  • Token 的使用

Token 用来定义一个唯一的注入器键,用于查找一个注入器中的依赖项。

在 Angular 中,Token 主要用于两种情况:

  1. 使用 @Inject 装饰器来获取依赖项
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ------ - ---- -----------

------------
  --------- -----------
  --------- -
    -------- ---- -- ------ --------
    ---------- ----- -- --------- --------
  -
--
------ ----- ------------ -
  ------- ------- -------
  ------- ---------- --------

  ----------------------------- ------- ------- ------- -
    ----------- - ---------------------
    -------------- - ------------------------
  -
-

在上述代码中,我们使用 @Inject 装饰器和 Config 服务的 Token(字符串 'config')来获取注入到组件中的 Config 服务。

  1. 在 Provider 中使用 Token

下面以一个例子来说明 Provider 中如何使用 Token。

-- -------------------- ---- -------
------ - ----------- --------- -------------- - ---- ----------------

------ --------- --------- -
  ------- -------
  ---------- --------
-

------ ----- ---------- - --- ----------------------------------------

-------------
  ----------- -------
--
------ ----- ------------- -
  ------------------------------- ------- ------- ---------- --

  ----------- -
    ------ ------------
  -
-

------ ----- -------------------- -------- - -
  -------- -----------
  --------- -
    ------- -------------------------
    ---------- -----
  --
--

在上述代码中,我们首先定义了一个用来获取配置信息的 APP_CONFIG 常量,它是一个用来通过 Token 获取依赖项的 InjectionToken。然后,我们在 ConfigService 的构造函数中使用 @Inject 装饰器和 APP_CONFIG 的 Token 来获取配置信息。

最后,我们定义了一个 APP_CONFIG_PROVIDER 供应商,它提供了配置信息的值。这个供应商的 provide 属性是 APP_CONFIG 的 Token,用来匹配 ConfigService 中使用的依赖项的 Token,useValue 属性用来设置配置信息的值。

总结

在本文中,我们介绍了 Angular 中 Provider 和 Token 的概念、区别与联系,以及它们的应用场景。我们通过一个例子详细地介绍了 Provider 和 Token 的使用方法,在实际开发中,我们可以使用它们来实现更丰富、更灵活、更符合业务需求的依赖注入。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6482f77948841e9894255434

纠错
反馈