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

在 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


猜你喜欢

  • ES11 中的 globalThis 对象:有什么作用?

    在 JavaScript 中,全局对象是指在浏览器环境中是 window,在 Node.js 环境中是 global。但是全局对象的命名存在差异,这让跨平台开发变得困难。

    1 年前
  • GraphQL 限制字段返回的数量以减轻负载压力

    GraphQL 限制字段返回的数量以减轻负载压力 GraphQL 是一个新兴的 API 查询语言,它可以使前端开发人员更加灵活地请求数据的方式,并且不会返回不需要的数据,从而减轻负担和压力。

    1 年前
  • Docker 在 Windows 下的安装与配置

    Docker 是一款强大的容器化工具,可以让开发和运维人员更轻松地构建、打包、发布和运行应用程序。在 Windows 平台上安装和配置 Docker 也十分简单,本文将为大家详细介绍如何实现这一过程。

    1 年前
  • 使用 SSE 实现前后端实时数据同步

    随着 Web 应用的发展,前后端数据同步变得越来越重要,特别是在实时应用和在线游戏中,实时数据同步就显得尤为关键。Server-Sent Events(SSE)是一种新型的浏览器与服务器通信方法,它可...

    1 年前
  • Serverless 遇到函数包体积过大怎么办?

    Serverless 技术是近几年前端开发领域的一大热门。它通过将应用部署到云端,降低了应用的部署与运维成本,使得前端开发者更专注于业务开发。然而,当函数包体积过大时,如何处理这个问题成为了前端开发者...

    1 年前
  • Jest 超时报错问题怎么解决?

    在前端开发中,我们通常会用到 Jest 来进行单元测试,然而在测试过程中,你可能会遇到 Jest 超时报错的问题。本文将会介绍这个问题的出现原因,并提供一些解决方案。

    1 年前
  • 无障碍设计:如何为电脑与移动设备用户提供高水准的使用体验?

    随着科技的不断发展,我们的生活方式也不断改变。对于聋哑人士、色盲患者、截肢者等特殊人群,使用电脑或移动设备可能会面临各种困难和挑战。因此,无障碍设计的重要性日益凸显。

    1 年前
  • 在 Chai 中如何判断两个对象是否严格相等

    引言 在前端开发中,我们经常需要比较两个对象是否严格相等,判断它们是否具有相同的属性和属性值。而在测试中,我们通常会使用 Chai 这样的工具来进行断言。但是,由于 JavaScript 中对象是通过...

    1 年前
  • 弄清 SPA 单页面应用的概念

    前言 在 Web 开发领域,单页面应用(Single-Page Application,简称 SPA)是一种常见的应用类型。与传统的多页面应用不同,SPA 只有一个页面,它通过 JavaScript ...

    1 年前
  • ES7 中的 Symbol 和 Symbol.iterator

    介绍 在 JavaScript 中,每个属性和方法都有一个字符串类型的名称作为标识符。但是,有时候我们需要一种能够保证唯一性的标识符。为了解决这个问题,ES6 引入了一种新的原始数据类型 Symbol...

    1 年前
  • 基于 Enzyme 和 Jest 单元测试 React Hooks

    在前端开发中,测试是不可或缺的一个步骤,可以有效提高我们的代码质量和稳定性。React Hooks 是近年来 React 的一项重大更新,它们提供了一种更简便的编写组件逻辑的方式。

    1 年前
  • Deno 中如何使用 ES6 模块

    Deno 是一个基于 V8 引擎的运行时环境,用于在服务器端和客户端运行 JavaScript 和 TypeScript。正如 Node.js 一样,Deno 也支持使用模块化进行代码组织和管理,其中...

    1 年前
  • 如何使用 RxJS 获取最近 10 个事件的平均时长

    RxJS 是一个用于处理异步事件的 JavaScript 库。它提供了一些非常有用的工具,例如 observables、operators 和 subjects,可以方便地处理事件流的各个方面。

    1 年前
  • babel-plugin-transform-runtime 插件使用详解

    什么是 babel-plugin-transform-runtime? babel-plugin-transform-runtime 是一个 Babel 插件,可以将 ES6 或更高版本的代码转换成兼...

    1 年前
  • 使用 Koa2 实现文件上传的进度条显示

    在前端开发过程中,文件上传是必不可少的一个功能,常常会遇到上传大文件的情况。在上传大文件时,因为需要等待一段时间,用户往往会感到不耐烦。而我们可以通过实现上传进度条来提高用户体验,让用户可以知道文件上...

    1 年前
  • SASS 中的样式继承

    SASS 是一个非常流行的 CSS 预处理器,为我们提供了一系列的语法加强和功能拓展。其中,样式继承是 SASS 中一项十分重要的特性。在本篇文章中,我们将探讨 SASS 中样式继承的使用和实现以及一...

    1 年前
  • 如何在 LESS 中实现移动端页面布局

    移动端无疑已经成为了互联网时代最强劲的发展动力之一。在移动端开发中,页面的响应式设计是必不可少的。而在LESS中,我们可以通过一些方法来实现移动端页面的布局。在本篇文章中,我将会介绍如何利用LESS实...

    1 年前
  • CSS Grid 如何实现滚动文本布局?

    在前端开发领域,布局是非常重要的一环。而 CSS Grid 作为一种新的布局方案,更是可以帮助我们轻松实现各种复杂布局。本文将重点介绍如何使用 CSS Grid 实现滚动文本布局,并附带代码示例。

    1 年前
  • Headless CMS 中如何处理文件删除

    在 Web 开发中,Content Management System(CMS)是非常常见的一种技术栈。它们可以帮助开发者管理内容,并通过网络将这些内容呈现给最终用户。

    1 年前
  • 利用 Go 语言构建高性能 RESTful API 服务的方法

    RESTful API 是现代应用程序开发的重要组成部分。它们使用 HTTP 协议进行通信,可以提供高度灵活的数据交换、快速、可靠的响应和易于维护的代码。在重度负载下,必须编写高效的 RESTful ...

    1 年前

相关推荐

    暂无文章